Raster-Dienstprogramme

Eine weitere Möglichkeit, Website-Inhalte zu organisieren, ist durch Raster. Tailwind CSS bietet leistungsstarke Utilities zur Erstellung von Rasterlayouts. Dieses Kapitel erklärt, wie man die Tailwind CSS-Raster-Utilities verwendet, um Rastercontainer und -elemente zu erstellen.

Rastercontainer

Um einen Rastercontainer zu definieren, verwenden Sie die grid-Klasse. Sie können die Anzahl der Spalten, die Abstände zwischen den Zeilen und Spalten und mehr steuern.

Erklärung

1. grid: Setzt die Anzeige des Elements auf Grid;
2. grid-cols-3: Definiert ein Raster mit drei Spalten;
3. gap-4: Fügt einen Abstand von 1rem (16px) zwischen Rasterelementen hinzu.

Raster mit Zeilen

grid-rows-2: Definiert ein Raster mit zwei Zeilen.

Steuerung der Spalten- und Zeilengrößen

Sie können die Größen von Spalten und Zeilen mit den Klassen grid-cols-{n} und grid-rows-{n} steuern, wobei {n} die Anzahl der Spalten oder Zeilen darstellt. Sie können auch Bruchteileinheiten (fr), Prozentsätze und andere Größeneinheiten verwenden.

Erklärung

1. col-span-2: Dehnt das Element über zwei Spalten aus;
2. col-span-3: Dehnt das Element über alle drei Spalten aus.

Feste und flexible Größen

Erklärung

1. w-1/2: Setzt die Breite des Elements auf 50% seines Containers;
2. w-full: Setzt die Breite des Elements auf 100% seines Containers;
3. w-1/3: Setzt die Breite des Elements auf 33,33% seines Containers.

Grid Template Columns und Rows

Sie können spezifische Utility-Klassen verwenden, um die Anzahl und Breite der Spalten und Zeilen in Ihrem Grid-Layout zu definieren.

Benutzerdefinierte Rasterspalten

Erklärung

1. grid-cols-4: Definiert ein Raster mit vier Spalten;
2. col-span-1: Überspannt das Element über eine Spalte;
3. col-span-2: Überspannt das Element über zwei Spalten.

Benutzerdefinierte Rasterzeilen

Erklärung

1. grid-rows-3: Definiert ein Raster mit drei Zeilen;
2. row-span-2: Spannt das Element über zwei Zeilen;
3. row-span-1: Spannt das Element über eine Zeile.

Hinweis

Bitte beachten Sie die offizielle Dokumentation für weitere Informationen über das Tailwind CSS Grid.