In Tailwind CSS führt die Zeilenspanne dazu, dass ein Element zwei oder mehr Zeilen innerhalb des Rasters einnimmt. Es wird verwendet, um die Anzahl der Zeilen zu definieren, die ein Element belegen/überspannen soll. Es ermöglicht Benutzern, die Größe und Position des Rasterelements über mehrere Zeilen hinweg anzupassen und verschiedene Layouts zu erstellen. Darüber hinaus können damit flexible und reaktionsfähige Rasterlayouts für Webseiten erstellt werden.
In diesem Artikel wird die Methode erläutert, mit der sich Zeilen in Tailwind CSS überspannen lassen.
Wie erstelle ich eine Zeilenspanne bei Rückenwind?
Um die Zeilen in Tailwind übergreifend zu gestalten, erstellen Sie ein HTML-Programm. Nutzen Sie dann die „ row-span-
Für die praktische Umsetzung sehen Sie sich die bereitgestellten Schritte an:
Schritt 1: Erstellen Sie eine Spaltenspanne im HTML-Programm
Erstellen Sie ein HTML-Programm und verwenden Sie das „ row-span-
< Körper >
< div Klasse = „grid Grid-rows-4 Grid-flow-col Gap-3 m-3 Text-Center“ >
< div Klasse = „row-span-3 bg-teal-500 p-5“ > 1 < / div >
< div Klasse = „bg-teal-500 p-5“ > 2 < / div >
< div Klasse = „row-span-2 bg-teal-500 p-5“ > 3 < / div >
< div Klasse = „bg-teal-500 p-5“ > 4 < / div >
< div Klasse = „bg-teal-500 p-5“ > 5 < / div >
< div Klasse = „row-span-4 bg-teal-500 p-5“ > 6 < / div >
< / div >
< / Körper >
Hier im übergeordneten
- „ Netz Die Klasse „wird zum Erstellen eines Rasterlayouts verwendet.
- „ Rasterzeile-4 Die Klasse „Setzt die Zeilennummer im Raster auf 4.
- „ Grid-Flow-Spalte Die Klasse „Platziert die Rasterelemente horizontal in Spalten.
- „ Lücke-3 Die Klasse legt einen Abstand von 3 Einheiten zwischen jedem Rasterelement fest.
- „ m-3 Die Klasse „wendet einen Rand von 3 Einheiten um den Rastercontainer an.
- „ Text-Center Die Klasse „Setzt den Text jedes Rasterelements in die Mitte.
In den untergeordneten
- „ Zeilenspanne-3 Die Klasse „gibt an, dass sich das Element über drei Zeilen im Raster erstrecken soll.
- „ Zeilenspanne-2 Die Klasse „gibt an, dass sich das Element über zwei Zeilen im Raster erstrecken soll.
- „ Zeilenspanne-4 Die Klasse „gibt an, dass sich das Element über 4 Zeilen im Raster erstrecken soll.
- „ bg-teal-500 Die Klasse „Setzt die blaugrüne Farbe auf den Hintergrund des Rasterelements.
- „ S. 5 Die Klasse fügt dem Inhalt innerhalb der untergeordneten -Elemente einen Abstand von 5 Einheiten hinzu.
Schritt 2: Ausgabe überprüfen
Sehen Sie sich die HTML-Webseite an, um zu überprüfen, ob die Zeilenspanne angewendet wurde oder nicht:
In der obigen Ausgabe ist zu erkennen, dass die Zeilenspanne entsprechend ihrer Angabe erfolgreich angewendet wurde.
Abschluss
Um die Zeilen in Tailwind überspannen zu lassen, verwenden Sie die Funktion „ row-span-
”-Dienstprogramm im HTML-Programm und geben Sie die Anzahl der Zeilen an, die jedes Element umfassen soll. Sehen Sie sich zur Überprüfung die Änderungen auf der HTML-Webseite an. In diesem Artikel wurde die Methode erläutert, mit der sich Zeilen in Tailwind CSS überspannen lassen.