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

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

index.html

index.html

copy

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

index.html

index.html

copy

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.

index.html

index.html

copy

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

index.html

index.html

copy

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

index.html

index.html

copy

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

index.html

index.html

copy

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?

Select the correct answer

question mark

Wie definiert man ein Raster mit drei Spalten?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 4. Kapitel 5

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Suggested prompts:

Fragen Sie mich Fragen zu diesem Thema

Zusammenfassen Sie dieses Kapitel

Zeige reale Beispiele

Awesome!

Completion rate improved to 3.57

bookRaster-Dienstprogramme

Swipe um das Menü anzuzeigen

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.

index.html

index.html

copy

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

index.html

index.html

copy

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.

index.html

index.html

copy

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

index.html

index.html

copy

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

index.html

index.html

copy

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

index.html

index.html

copy

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?

Select the correct answer

question mark

Wie definiert man ein Raster mit drei Spalten?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 4. Kapitel 5
some-alt