In diesem Artikel wird die Methode zum Anwenden von Haltepunkten und Medienabfragen auf das Zeilenraster in Tailwind CSS veranschaulicht.
Wie wende ich Haltepunkte und Medienabfragen auf das Zeilenraster in Tailwind an?
Erstellen Sie ein HTML-Programm, um Haltepunkte und Medienabfragen auf das Zeilenraster in Tailwind anzuwenden. Definieren Sie dann die Anzahl der Zeilen für verschiedene Bildschirmgrößen mit dem „ sm “, „ md ' oder ' lg ” Haltepunkte mit dem „ Grid-rows-
Lassen Sie uns die praktische Umsetzung untersuchen:
Schritt 1: Verwenden Sie Haltepunkte und Medienabfragen mit Zeilenraster im HTML-Programm
Erstellen Sie ein HTML-Programm und definieren Sie die Anzahl der Zeilen für verschiedene Bildschirmgrößen mit dem „ Grid-rows-
< Körper >
< div Klasse = „grid Grid-rows-2 md:grid-rows-3 lg:grid-rows-5 Grid-flow-col Gap-3 m-3 Text-Center“ >
< div Klasse = „bg-teal-500 p-5“ > 1 < / div >
< div Klasse = „bg-teal-500 p-5“ > 2 < / div >
< div Klasse = „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 = „bg-teal-500 p-5“ > 6 < / div >
< div Klasse = „bg-teal-500 p-5“ > 7 < / div >
< div Klasse = „bg-teal-500 p-5“ > 8 < / div >
< div Klasse = „bg-teal-500 p-5“ > 9 < / div >
< div Klasse = „bg-teal-500 p-5“ > 10 < / div >
< / div >
< / Körper >
Hier:
- „ Netz Die Klasse „wird zum Erstellen eines Rasterlayouts verwendet.
- „ Rasterzeilen-2 Die Klasse „gibt an, dass das Raster zwei gleich große Zeilen haben soll.
- „ md:grid-rows-3 Die Klasse „Ändert das Raster auf mittlerer Bildschirmgröße in drei gleich große Zeilen.
- „ lg:grid-rows-5 Die Klasse „Ändert das Raster auf dem großen Bildschirm in 5 gleich große Zeilen.
- „ 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.
- „ bg-teal-500 Die Klasse „Setzt die blaugrüne Farbe auf den Hintergrund von Rasterelementen.
- „ S. 5 Die Klasse fügt dem Inhalt im Kind eine Auffüllung von 5 Einheiten hinzu
Artikel.
Schritt 2: Ausgabe überprüfen
Um sicherzustellen, dass die Haltepunkte und Medienabfragen auf das Zeilenraster angewendet wurden, zeigen Sie die HTML-Webseite an, indem Sie die Bildschirmgröße ändern:
In der obigen Ausgabe ist zu erkennen, dass sich die Anzahl der Zeilen mit der Bildschirmgröße ändert. Dies zeigt an, dass die Haltepunkte und Medienabfragen erfolgreich auf das Zeilenraster angewendet wurden.
Abschluss
Um Haltepunkte und Medienabfragen auf das Zeilenraster in Tailwind anzuwenden, definieren Sie die Anzahl der Zeilen für verschiedene Bildschirmgrößen mit dem „ sm “, „ md ' oder ' lg ” Haltepunkte mit dem „ Grid-rows-
„Dienstprogramme. Stellen Sie dann Änderungen auf der Webseite sicher, indem Sie die Bildschirmgröße ändern. In diesem Artikel wurde die Methode zum Anwenden von Haltepunkten und Medienabfragen auf das Zeilenraster in Tailwind CSS veranschaulicht.