Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lernen Raster-Dienstprogramme | Layout-Grundlagen
Tailwind CSS für Webentwicklung

book
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.

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Grid Utilities - Example 1</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="grid grid-cols-3 gap-4">
<div class="bg-blue-500 p-4">Item 1</div>
<div class="bg-green-500 p-4">Item 2</div>
<div class="bg-red-500 p-4">Item 3</div>
</div>
</body>
</html>

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

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Grid Utilities - Example 2</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="grid grid-cols-2 grid-rows-2 gap-4">
<div class="bg-blue-500 p-4">Item 1</div>
<div class="bg-green-500 p-4">Item 2</div>
<div class="bg-red-500 p-4">Item 3</div>
<div class="bg-yellow-500 p-4">Item 4</div>
</div>
</body>
</html>

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.

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Grid Utilities - Example 3</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="grid grid-cols-3 gap-4">
<div class="col-span-2 bg-blue-500 p-4">Item 1</div>
<div class="bg-green-500 p-4">Item 2</div>
<div class="col-span-3 bg-red-500 p-4">Item 3</div>
</div>
</body>
</html>

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

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Grid Utilities - Example 4</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="grid grid-cols-3 gap-4">
<div class="w-1/2 bg-blue-500 p-4">Item 1</div>
<div class="w-full bg-green-500 p-4">Item 2</div>
<div class="w-1/3 bg-red-500 p-4">Item 3</div>
</div>
</body>
</html>

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

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Grid Utilities - Example 5</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="grid grid-cols-4 gap-4">
<div class="col-span-1 bg-blue-500 p-4">1 / 4</div>
<div class="col-span-2 bg-green-500 p-4">2 / 4</div>
<div class="col-span-1 bg-red-500 p-4">1 / 4</div>
</div>
</body>
</html>

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

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Grid Utilities - Example 6</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="grid grid-rows-3 gap-4">
<div class="row-span-2 bg-blue-500 p-4">2 / 3</div>
<div class="row-span-1 bg-green-500 p-4">1 / 3</div>
<div class="row-span-1 bg-red-500 p-4">1 / 3</div>
</div>
</body>
</html>

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.

1. Welche Klasse setzt die Display-Eigenschaft auf Grid?

2. Wie definiert man ein Raster mit drei Spalten?

question mark

Welche Klasse setzt die Display-Eigenschaft auf Grid?

Wählen Sie die richtige Antwort aus

question mark

Wie definiert man ein Raster mit drei Spalten?

Wählen Sie die richtige Antwort aus

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 4. Kapitel 5
some-alt