In diesem Beitrag wird das vollständige Verfahren zum Hinzufügen der Lücke zwischen Spalten in Tailwind erläutert.
Wie füge ich in Tailwind eine Lücke zwischen Spalten hinzu?
Um die Lücke zwischen den Spalten in Tailwind hinzuzufügen, verwenden Sie das integrierte „ Lücke-{Größe} ' Dienstprogramm. Es gibt einen ganzzahligen Wert an, der den Abstand zwischen den Spalten horizontal und vertikal darstellt. Lassen Sie uns diese Aufgabe anhand der angegebenen Beispiele praktisch lösen.
Projektdateistruktur
Der ' Lücke-{Größe} Das Dienstprogramm kann in jedem der Tailwind-Projekte implementiert werden, die der angegebenen Dateistruktur folgen:
Beginnen wir mit dem ersten Beispiel.
Beispiel 1: Verwenden Sie das Dienstprogramm „gap-{size}“, um die gleiche Lücke zwischen Zeilen und Spalten hinzuzufügen
In diesem Beispiel wird das Dienstprogramm „gap-{size}“ angewendet, um horizontal und vertikal dieselbe Lücke zwischen den angegebenen Spalten hinzuzufügen.
HTML Quelltext
Übersicht über den folgenden Code:
< Kopf >
< Verknüpfung href = „/dist/output.css“ rel = „Stylesheet“ >
< / Kopf >
< Körper >
< h1 Klasse = „text-3xl font-bold text-center underline text-orange-600“ > Willkommen bei Linuxhint! < / h1 >< br >
< div Klasse = „mx-2 Raster Raster-Spalten-3 Lücke-4“ >
< div Klasse = „border-2 border-orange-600“ > Erstes Tutorial < / div >
< div Klasse = „border-2 border-orange-600“ > Zweites Tutorial < / div >
< div Klasse = „border-2 border-orange-600“ > Drittes Tutorial < / div >
< div Klasse = „border-2 border-orange-600“ > Viertes Tutorial < / div >
< div Klasse = „border-2 border-orange-600“ > Fünftes Tutorial < / div >
< div Klasse = „border-2 border-orange-600“ > Sechstes Tutorial < / div >
< div Klasse = „border-2 border-orange-600“ > Siebtes Tutorial < / div >
< div Klasse = „border-2 border-orange-600“ > Achtes Tutorial < / div >
< / div >
In den obigen Codezeilen:
- Verknüpfen Sie zunächst die Haupt-CSS-Datei „ /dist/output.css ” mit der vorhandenen HTML-Datei „ index.html ' Verwendung der ' ”-Tag im Abschnitt „Kopf“.
- Als nächstes erstellt der Abschnitt „body“ ein „
“-Element, das das „ Schriftgröße “, „ Schriftstärke “, „ Textausrichtung “, „ Textdekoration ', und das ' Textfarbe ” Rückenwindklassen bzw.
- Danach wird ein „“-Element hinzugefügt, das das „ Netz ” Dienstprogramm, um seinen Inhalt in der angegebenen Anzahl von Rasterlayouts festzulegen, das „ Rand ”-Klasse zum Festlegen des horizontalen Randes und die „ Lücke ”-Dienstprogramm zum Hinzufügen der angegebenen Lücke zwischen den Spalten.
- Im Abschnitt „
“-Elementkörper sind weitere acht „“-Elemente enthalten, die das „“-Element verwenden. Rahmenbreite ' und das ' Randfarbe ” Klassen bzw.Ausgang
Führen Sie den obigen HTML-Code auf dem Live-Server aus und analysieren Sie die Ausgabe:
Wie Sie sehen, fügt die Ausgabe die angegebene Lücke zwischen den Spalten in beiden Dimensionen entsprechend hinzu.
Beispiel 2: Verwenden Sie das Dienstprogramm „gap-{size}“, um unabhängig voneinander eine Lücke zwischen Zeilen und Spalten hinzuzufügen
Der ' Lücke-{Größe} Das Dienstprogramm kann auch mit den Dimensionen „x(horizontal)“ und „y(vertikal)“ als „gap-x-{size}“ für Zeilen und „gap-y-{size}“ für Spalten implementiert werden, um das hinzuzufügen Lücke zwischen ihnen einzeln.Schauen wir uns die praktische Umsetzung an.
HTML Quelltext
< Kopf >
Schauen Sie sich den angegebenen Code an:
< Verknüpfung href = „/dist/output.css“ rel = „Stylesheet“ >
< / Kopf >
< Körper >
< div Klasse = „mx-2 Raster Raster-Spalten-4 Lücke-x-4 Lücke-y-6“ >
< div Klasse = „border-2 border-orange-600“ >Erstes Tutorial< / div >
< div Klasse = „border-2 border-orange-600“ >Zweites Tutorial< / div >
< div Klasse = „border-2 border-orange-600“ >Drittes Tutorial< / div >
< div Klasse = „border-2 border-orange-600“ >Viertes Tutorial< / div >
< div Klasse = „border-2 border-orange-600“ >Fünftes Tutorial< / div >
< div Klasse = „border-2 border-orange-600“ >Sechstes Tutorial< / div >
< div Klasse = „border-2 border-orange-600“ >Siebtes Tutorial< / div >
< div Klasse = „border-2 border-orange-600“ >Achtes Tutorial< / div >
< / div >
< Körper >Hier das ' Lücke-x-{Größe} Das Dienstprogramm fügt die Lücke zwischen Zeilen und „ hinzu. Lücke-y-{Größe} ” fügt die angegebene Lücke zwischen den Spalten unabhängig hinzu.
Ausgang
Das obige Ergebnis bestätigt, dass die Lücke zwischen Zeilen und Spalten entsprechend angewendet wird.
Abschluss
„Tailwind CSS“ bietet ein integriertes „ Lücke-{Größe} ”-Dienstprogramm zum Hinzufügen der Lücke zwischen den Spalten. Es kann auch verwendet werden, um die Lücke zwischen Zeilen und Spalten separat über die Funktion „ Lücke-x-{Größe} ' und das ' Lücke-y-{Größe} „Dienstprogramme. In diesem Beitrag wurde das vollständige Verfahren zum Hinzufügen der Lücke zwischen Spalten in Tailwind bereitgestellt.
- Im Abschnitt „