Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lernen Erstellen von Layouts mit Grid-Dienstprogrammen | Layout-Grundlagen
Tailwind CSS für Webentwicklung

bookErstellen von Layouts mit Grid-Dienstprogrammen

Eine weitere Möglichkeit, Website-Inhalte zu organisieren, ist die Verwendung von Rastern. Tailwind CSS bietet leistungsstarke Utilities zur Erstellung von Grid-Layouts. In diesem Kapitel wird erläutert, wie Tailwind CSS Grid-Utilities verwendet werden, um Grid-Container und -Elemente zu definieren.

Grid-Container

Um einen Grid-Container zu definieren, wird die Klasse grid verwendet. Die Anzahl der Spalten, die Abstände zwischen Zeilen und Spalten sowie weitere Eigenschaften können gesteuert werden.

index.html

index.html

copy

Erklärung

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

Grid mit Zeilen

index.html

index.html

copy

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

Steuerung von Spalten- und Zeilengrößen

Die Größen von Spalten und Zeilen können mit den Klassen grid-cols-{n} und grid-rows-{n} gesteuert werden, wobei {n} die Anzahl der Spalten oder Zeilen angibt. Es können auch Bruchteileinheiten (fr), Prozentangaben und andere Maßeinheiten verwendet werden.

index.html

index.html

copy

Erklärung

  1. col-span-2: Das Element erstreckt sich über zwei Spalten;
  2. col-span-3: Das Element erstreckt sich über alle drei Spalten.

Feste und flexible Größen

index.html

index.html

copy

Erläuterung

  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-Spalten und -Zeilen

Spezielle Utility-Klassen ermöglichen die Definition der Anzahl und Breite von Spalten und Zeilen im Grid-Layout.

Benutzerdefinierte Grid-Spalten

index.html

index.html

copy

Erklärung

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

Benutzerdefinierte Grid-Zeilen

index.html

index.html

copy

Erläuterung

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

Hinweis

Weitere Informationen zum Tailwind CSS Grid finden Sie in der offiziellen Dokumentation.

1. Welche Klasse setzt die Eigenschaft display auf grid?

2. Wie definiert man ein Grid mit drei Spalten?

question mark

Welche Klasse setzt die Eigenschaft display auf grid?

Select the correct answer

question mark

Wie definiert man ein Grid 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:

Can you explain how to use grid utilities for responsive layouts?

What are some common use cases for grid layouts in Tailwind CSS?

Can you show more examples of combining grid and flex utilities?

Awesome!

Completion rate improved to 3.57

bookErstellen von Layouts mit Grid-Dienstprogrammen

Swipe um das Menü anzuzeigen

Eine weitere Möglichkeit, Website-Inhalte zu organisieren, ist die Verwendung von Rastern. Tailwind CSS bietet leistungsstarke Utilities zur Erstellung von Grid-Layouts. In diesem Kapitel wird erläutert, wie Tailwind CSS Grid-Utilities verwendet werden, um Grid-Container und -Elemente zu definieren.

Grid-Container

Um einen Grid-Container zu definieren, wird die Klasse grid verwendet. Die Anzahl der Spalten, die Abstände zwischen Zeilen und Spalten sowie weitere Eigenschaften können gesteuert werden.

index.html

index.html

copy

Erklärung

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

Grid mit Zeilen

index.html

index.html

copy

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

Steuerung von Spalten- und Zeilengrößen

Die Größen von Spalten und Zeilen können mit den Klassen grid-cols-{n} und grid-rows-{n} gesteuert werden, wobei {n} die Anzahl der Spalten oder Zeilen angibt. Es können auch Bruchteileinheiten (fr), Prozentangaben und andere Maßeinheiten verwendet werden.

index.html

index.html

copy

Erklärung

  1. col-span-2: Das Element erstreckt sich über zwei Spalten;
  2. col-span-3: Das Element erstreckt sich über alle drei Spalten.

Feste und flexible Größen

index.html

index.html

copy

Erläuterung

  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-Spalten und -Zeilen

Spezielle Utility-Klassen ermöglichen die Definition der Anzahl und Breite von Spalten und Zeilen im Grid-Layout.

Benutzerdefinierte Grid-Spalten

index.html

index.html

copy

Erklärung

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

Benutzerdefinierte Grid-Zeilen

index.html

index.html

copy

Erläuterung

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

Hinweis

Weitere Informationen zum Tailwind CSS Grid finden Sie in der offiziellen Dokumentation.

1. Welche Klasse setzt die Eigenschaft display auf grid?

2. Wie definiert man ein Grid mit drei Spalten?

question mark

Welche Klasse setzt die Eigenschaft display auf grid?

Select the correct answer

question mark

Wie definiert man ein Grid 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