Tailwind CSS für Flexbox- und Grid-Layout
Tailwind CSS bietet leistungsstarke Utility-Klassen zur Verwaltung von Layouts, insbesondere Flexbox und Grid.
Die Flexbox- und Grid-Utility-Klassen ermöglichen es Ihnen, effizient responsive, flexible Layouts zu erstellen, ohne benutzerdefiniertes CSS zu schreiben.
Die Philosophie von Tailwind CSS ist, Layouts durch Low-Level-Utility-First-Klassen zu steuern und Klassen flexibel zu kombinieren, um unterschiedliche Designanforderungen zu erfüllen.
1. Flexbox-Layout
Flexbox ist ein Layoutmodus, der Entwicklern hilft, eindimensionale (horizontale oder vertikale) Layouts zu erstellen.
Tailwind CSS bietet mehrere prägnante Utility-Klassen, um alle Aspekte des Flexbox-Layouts zu steuern, einschließlich Richtung, Ausrichtung und Flexibilität.
Einrichten eines Flex-Containers
Um ein Flexbox-Layout zu erstellen, muss man das Element zuerst als Flex-Container festlegen.
Beispiel
<div class="flex">
<div>Element 1</div>
<div>Element 2</div>
<div>Item 3</div>
</div>
<div>Element 1</div>
<div>Element 2</div>
<div>Item 3</div>
</div>
Selbst ausprobieren »
`flex` setzt die display-Eigenschaft des Elements auf `flex` und aktiviert so das Flexbox-Layout.
Utility-Klassen für die Anfangsgröße von Flex-Elementen und ihre entsprechenden CSS-Eigenschaften:
| Tailwind-Klassenname | CSS-Eigenschaft und Wert | Beschreibung |
|---|---|---|
basis-0 | flex-basis:0px; | Legt die Basisgröße des Flex-Elements auf 0px fest. |
basis-1 | flex-basis:0.25rem; | Legt die Basisgröße des Flex-Elements auf 4px fest. |
basis-2 | flex-basis:0.5rem; | Legt die Basisgröße des Flex-Elements auf 8px fest. |
basis-3 | flex-basis:0.75rem; | Legt die Basisgröße des Flex-Elements auf 12px fest. |
basis-4 | flex-basis:1rem; | Legt die Basisgröße des Flex-Elements auf 16px fest. |
basis-5 | flex-basis:1.25rem; | Legt die Basisgröße des Flex-Elements auf 20px fest. |
basis-6 | flex-basis:1.5rem; | Legt die Basisgröße des Flex-Elements auf 24px fest. |
basis-7 | flex-basis:1.75rem; | Legt die Basisgröße des Flex-Elements auf 28px fest. |
basis-8 | flex-basis:2rem; | Legt die Basisgröße des Flex-Elements auf 32px fest. |
basis-9 | flex-basis:2.25rem; | Legt die Basisgröße des Flex-Elements auf 36px fest. |
basis-10 | flex-basis:2.5rem; | Legt die Basisgröße des Flex-Elements auf 40px fest. |
basis-11 | flex-basis:2.75rem; | Legt die Basisgröße des Flex-Elements auf 44px fest. |
basis-12 | flex-basis:3rem; | Legt die Basisgröße des Flex-Elements auf 48px fest. |
basis-14 | flex-basis:3.5rem; | Legt die Basisgröße des Flex-Elements auf 56px fest. |
basis-16 | flex-basis:4rem; | Legt die Basisgröße des Flex-Elements auf 64px fest. |
basis-20 | flex-basis:5rem; | Legt die Basisgröße des Flex-Elements auf 80px fest. |
basis-24 | flex-basis:6rem; | Legt die Basisgröße des Flex-Elements auf 96px fest. |
basis-28 | flex-basis:7rem; | Legt die Basisgröße des Flex-Elements auf 112px fest. |
basis-32 | flex-basis:8rem; | Legt die Basisgröße des Flex-Elements auf 128px fest. |
basis-36 | flex-basis:9rem; | Legt die Basisgröße des Flex-Elements auf 144px fest. |
basis-40 | flex-basis:10rem; | Legt die Basisgröße des Flex-Elements auf 160px fest. |
basis-44 | flex-basis:11rem; | Legt die Basisgröße des Flex-Elements auf 176px fest. |
basis-48 | flex-basis:12rem; | Legt die Basisgröße des Flex-Elements auf 192px fest. |
basis-52 | flex-basis:13rem; | Legt die Basisgröße des Flex-Elements auf 208px fest. |
basis-56 | flex-basis:14rem; | Legt die Basisgröße des Flex-Elements auf 224px fest. |
basis-60 | flex-basis:15rem; | Legt die Basisgröße des Flex-Elements auf 240px fest. |
basis-64 | flex-basis:16rem; | Legt die Basisgröße des Flex-Elements auf 256px fest. |
basis-72 | flex-basis:18rem; | Legt die Basisgröße des Flex-Elements auf 288px fest. |
basis-80 | flex-basis:20rem; | Legt die Basisgröße des Flex-Elements auf 320px fest. |
basis-96 | flex-basis:24rem; | Setzt die Basisgröße des Flex-Elements auf 384px. |
basis-auto | flex-basis:auto; | Setzt die Basisgröße des Flex-Elements auf auto. |
basis-px | flex-basis:1px; | Setzt die Basisgröße des Flex-Elements auf 1px. |
basis-0.5 | flex-basis:0.125rem; | Setzt die Basisgröße des Flex-Elements auf 2px. |
basis-1.5 | flex-basis:0.375rem; | Setzt die Basisgröße des Flex-Elements auf 6px. |
basis-2.5 | flex-basis:0.625rem; | Setzt die Basisgröße des Flex-Elements auf 10px. |
basis-3.5 | flex-basis:0.875rem; | Setzt die Basisgröße des Flex-Elements auf 14px. |
basis-1/2 | flex-basis:50%; | Setzt die Basisgröße des Flex-Elements auf die Hälfte der Containerbreite. |
basis-1/3 | flex-basis:33.333333%; | Setzt die Basisgröße des Flex-Elements auf ein Drittel der Containerbreite. |
basis-2/3 | flex-basis:66.666667%; | Setzt die Basisgröße des Flex-Elements auf zwei Drittel der Containerbreite. |
basis-1/4 | flex-basis:25%; | Setzt die Basisgröße des Flex-Elements auf ein Viertel der Containerbreite. |
basis-2/4 | flex-basis:50%; | Setzt die Basisgröße des Flex-Elements auf die Hälfte der Containerbreite. |
basis-3/4 | flex-basis:75%; | Legt die Basisgröße des Flex-Elements auf drei Viertel der Containerbreite fest. |
basis-1/5 | flex-basis:20%; | Legt die Basisgröße des Flex-Elements auf ein Fünftel der Containerbreite fest. |
basis-2/5 | flex-basis:40%; | Legt die Basisgröße des Flex-Elements auf zwei Fünftel der Containerbreite fest. |
basis-3/5 | flex-basis:60%; | Legt die Basisgröße des Flex-Elements auf drei Fünftel der Containerbreite fest. |
basis-4/5 | flex-basis:80%; | Legt die Basisgröße des Flex-Elements auf vier Fünftel der Containerbreite fest. |
basis-1/6 | flex-basis:16.666667%; | Legt die Basisgröße des Flex-Elements auf ein Sechstel der Containerbreite fest. |
basis-2/6 | flex-basis:33.333333%; | Legt die Basisgröße des Flex-Elements auf zwei Sechstel der Containerbreite fest. |
basis-3/6 | flex-basis:50%; | Setzt die Basisgröße des Flex-Elements auf zwei Drittel der Containerbreite. |
basis-4/6 | flex-basis:66.666667%; | Legt die Basisgröße des Flex-Elements auf vier Sechstel der Containerbreite fest. |
basis-5/6 | flex-basis:83.333333%; | Legt die Basisgröße des Flex-Elements auf fünf Sechstel der Containerbreite fest. |
basis-1/12 | flex-basis:8.333333%; | Legt die Basisgröße des Flex-Elements auf 8.33% fest. |
basis-2/12 | flex-basis:16.666667%; | Legt die Basisgröße des Flex-Elements auf 16.67% fest. |
basis-3/12 | flex-basis:25%; | Legt die Basisgröße des Flex-Elements auf 25% fest. |
basis-4/12 | flex-basis:33.333333%; | Legt die Basisgröße des Flex-Elements auf 33.33% fest. |
basis-5/12 | flex-basis:41.666667%; | Legt die Basisgröße des Flex-Elements auf 41.67% fest. |
basis-6/12 | flex-basis:50%; | Legt die Basisgröße des Flex-Elements auf 50% fest. |
basis-7/12 | flex-basis:58.333333%; | Legt die Basisgröße des Flex-Elements auf 58.33% fest. |
basis-8/12 | flex-basis:66.666667%; | Legt die Basisgröße des Flex-Elements auf 66.67% fest. |
basis-9/12 | flex-basis:75%; | Legt die Basisgröße des Flex-Elements auf 75% fest. |
basis-10/12 | flex-basis:83.333333%; | Legt die Basisgröße des Flex-Elements auf 83.33% fest. |
basis-11/12 | flex-basis:91.666667%; | Legt die Basisgröße des Flex-Elements auf 91.67% fest. |
basis-full | flex-basis:100%; | Legt die Basisgröße des Flex-Elements auf 100% fest. |
Beispiel
<div class="flex flex-row">
<div class="basis-1/4">01</div>
<div class="basis-1/4">02</div>
<div class="basis-1/2">03</div>
</div>
<div class="basis-1/4">01</div>
<div class="basis-1/4">02</div>
<div class="basis-1/2">03</div>
</div>
Selbst ausprobieren »
Flex-Richtung
`flex-direction` steuert die Richtung der Hauptachse (d. h. die Richtung, in der die Elemente innerhalb des Flex-Containers angeordnet werden).
Tailwind bietet die folgenden Utility-Klassen zum Festlegen der Richtung:
flex-rowStandardwert, Elemente werden horizontal von links nach rechts angeordnet.flex-row-reverseElemente werden horizontal von rechts nach links angeordnet.flex-colElemente werden vertikal von oben nach unten angeordnet.flex-col-reverseElemente werden vertikal von unten nach oben angeordnet.
Beispiel
<div class="flex flex-row ...">
<div>01</div>
<div>02</div>
<div>03</div>
</div>
<div class="flex flex-row-reverse ...">
<div>01</div>
<div>02</div>
<div>03</div>
</div>
<div class="flex flex-col ...">
<div>01</div>
<div>02</div>
<div>03</div>
</div>
<div>01</div>
<div>02</div>
<div>03</div>
</div>
<div class="flex flex-row-reverse ...">
<div>01</div>
<div>02</div>
<div>03</div>
</div>
<div class="flex flex-col ...">
<div>01</div>
<div>02</div>
<div>03</div>
</div>
Selbst ausprobieren »
Flex-Umbruch (Flex Wrap)
Standardmäßig werden Elemente in einem Flexbox-Container in einer einzigen Zeile angeordnet.
Wenn du möchtest, dass sie umbrechen, kannst du die Utility-Klasse `flex-wrap` verwenden.
flex-wrapErmöglicht das Umbrechen von Elementen.flex-nowrapVerhindert das Umbrechen von Elementen.flex-wrap-reverseKehrt das Umbrechen um.
Beispiel
<div class="flex flex-nowrap">
<div>01</div>
<div>02</div>
<div>03</div>
</div>
<div class="flex flex-wrap">
<div>01</div>
<div>02</div>
<div>03</div>
</div>
<div class="flex flex-wrap-reverse">
<div>01</div>
<div>02</div>
<div>03</div>
</div>
<div>01</div>
<div>02</div>
<div>03</div>
</div>
<div class="flex flex-wrap">
<div>01</div>
<div>02</div>
<div>03</div>
</div>
<div class="flex flex-wrap-reverse">
<div>01</div>
<div>02</div>
<div>03</div>
</div>
Selbst ausprobieren »
Flexibilität von Flex-Elementen
Flexbox ermöglicht, dass Elementgrößen je nach verfügbarem Platz wachsen und schrumpfen.
Tailwind CSS bietet die folgenden Utility-Klassen zur Steuerung der Flexibilität:
| Tailwind-Klassenname | CSS-Eigenschaft und Wert | Beschreibung |
|---|---|---|
flex-1 | flex: 1 1 0%; | Verleiht Flex-Elementen gleiche flex-grow- und flex-shrink-Fähigkeiten mit einer Basisgröße von 0%, wird häufig verwendet, um Flex-Layouts mit gleicher Breite oder gleicher Höhe zu erstellen. |
flex-auto | flex: 1 1 auto; | Verleiht Flex-Elementen eine automatische Basisgröße und gleiche flex-grow- und flex-shrink-Fähigkeiten, wird häufig verwendet, damit Flex-Elemente zusätzlichen Platz ausfüllen. |
flex-initial | flex: 0 1 auto; | Verleiht Flex-Elementen eine automatische Basisgröße, wächst nicht, kann aber schrumpfen; wird verwendet, um die natürliche Größe des Elements beizubehalten, es sei denn, der Platz reicht nicht aus. |
flex-none | flex: none; | Verhindert, dass Flex-Elemente wachsen oder schrumpfen, und hält sie auf ihrer Basisgröße. Wird oft verwendet, um die Größe von Elementen festzulegen. |
Beispiel
<div class="flex">
<div class="flex-none w-14 ...">
01
</div>
<div class="flex-initial w-64 ...">
02
</div>
<div class="flex-initial w-32 ...">
03
</div>
</div>
<div class="flex">
<div class="flex-none w-14 ...">
01
</div>
<div class="flex-1 w-64 ...">
02
</div>
<div class="flex-1 w-32 ...">
03
</div>
</div>
<div class="flex-none w-14 ...">
01
</div>
<div class="flex-initial w-64 ...">
02
</div>
<div class="flex-initial w-32 ...">
03
</div>
</div>
<div class="flex">
<div class="flex-none w-14 ...">
01
</div>
<div class="flex-1 w-64 ...">
02
</div>
<div class="flex-1 w-32 ...">
03
</div>
</div>
Selbst ausprobieren »
Die flex-grow-Eigenschaft
Die folgenden sind Utility-Klassen, die die flex-grow-Eigenschaft von Flex-Elementen steuern, zusammen mit ihren entsprechenden CSS-Eigenschaften:
| Tailwind-Klassenname | CSS-Eigenschaften und -werte | Beschreibung |
|---|---|---|
grow | flex-grow: 1; | Ermöglicht es dem Flex-Element, zu wachsen, um zusätzlichen Platz zu füllen, mit einem Wachstumsfaktor von 1. |
grow-0 | flex-grow: 0; | Verhindert, dass das Flex-Element wächst, um zusätzlichen Platz zu füllen, mit einem Wachstumsfaktor von 0. |
Beispiel
<div class="flex ...">
<div class="flex-none w-14 h-14 ...">
01
</div>
<div class="grow h-14 ...">
02
</div>
<div class="flex-none w-14 h-14 ...">
03
</div>
</div>
<div class="flex-none w-14 h-14 ...">
01
</div>
<div class="grow h-14 ...">
02
</div>
<div class="flex-none w-14 h-14 ...">
03
</div>
</div>
Selbst ausprobieren »
Die flex-shrink-Eigenschaft
Die folgenden sind Utility-Klassen, die die flex-shrink-Eigenschaft von Flex-Elementen steuern, zusammen mit ihren entsprechenden CSS-Eigenschaften:
| Tailwind-Klassenname | CSS-Eigenschaften und -werte | Beschreibung |
|---|---|---|
shrink | flex-shrink: 1; | Ermöglicht es dem Flex-Element, bei Bedarf zu schrumpfen, um in den Flex-Container zu passen, mit einem Schrumpfungsverhältnis von 1. |
shrink-0 | flex-shrink: 0; | Verhindert, dass das Flex-Element bei Bedarf schrumpft, um in den Flex-Container zu passen, mit einem Schrumpfungsverhältnis von 0. |
Beispiel
<div class="flex ...">
<div class="flex-none w-14 h-14 ...">
01
</div>
<div class="shrink w-64 h-14 ...">
02
</div>
<div class="flex-none w-14 h-14 ...">
03
</div>
</div>
<div class="flex-none w-14 h-14 ...">
01
</div>
<div class="shrink w-64 h-14 ...">
02
</div>
<div class="flex-none w-14 h-14 ...">
03
</div>
</div>
Selbst ausprobieren »
Reihenfolge
Die folgenden sind Utility-Klassen, die verwendet werden, um die Reihenfolge von Flex-Elementen oder Grid-Elementen zu steuern, zusammen mit ihren entsprechenden CSS-Eigenschaften:
| Tailwind-Klassenname | CSS-Eigenschaften und -werte | Beschreibung |
|---|---|---|
order-1 | order: 1; | Setzt die Reihenfolge des Flex-Elements oder Grid-Elements auf 1. |
order-2 | order: 2; | Setzt die Reihenfolge des Flex-Elements oder Grid-Elements auf 2. |
order-3 | order: 3; | Setzt die Reihenfolge des Flex-Elements oder Grid-Elements auf 3. |
order-4 | order: 4; | Legt die Reihenfolge des Flex-Elements oder Grid-Elements auf 4 fest. |
order-5 | order: 5; | Legt die Reihenfolge des Flex-Elements oder Grid-Elements auf 5 fest. |
order-6 | order: 6; | Legt die Reihenfolge des Flex-Elements oder Grid-Elements auf 6 fest. |
order-7 | order: 7; | Legt die Reihenfolge des Flex-Elements oder Grid-Elements auf 7 fest. |
order-8 | order: 8; | Legt die Reihenfolge des Flex-Elements oder Grid-Elements auf 8 fest. |
order-9 | order: 9; | Legt die Reihenfolge des Flex-Elements oder Grid-Elements auf 9 fest. |
order-10 | order: 10; | Legt die Reihenfolge des Flex-Elements oder Grid-Elements auf 10 fest. |
order-11 | order: 11; | Legt die Reihenfolge des Flex-Elements oder Grid-Elements auf 11 fest. |
order-12 | order: 12; | Legt die Reihenfolge des Flex-Elements oder Grid-Elements auf 12 fest. |
order-first | order: -9999; | Legt die Reihenfolge des Flex-Elements oder Grid-Elements auf die erste Position fest. |
order-last | order: 9999; | Legt die Reihenfolge des Flex-Elements oder Grid-Elements auf die letzte Position fest. |
order-none | order: 0; | Legt die Reihenfolge des Flex-Elements oder Grid-Elements auf die Standardreihenfolge fest, d. h., seine Reihenfolge wird nicht geändert. |
Beispiel
<div class="flex justify-between ...">
<div class="order-last">01</div>
<div>02</div>
<div>03</div>
</div>
<div class="order-last">01</div>
<div>02</div>
<div>03</div>
</div>
Selbst ausprobieren »
Grid-Layout
Grid ist ein weiteres Layout-Modell, das es Ihnen ermöglicht, Elemente präzise in Zeilen und Spalten zu positionieren und mühelos komplexe Layouts zu erstellen.
Tailwind CSS bietet leistungsstarke Utility-Klassen für die Arbeit mit Grid-Layouts.
Die folgenden sind Utility-Klassen in Tailwind CSS zum Festlegen der Anzahl von Spalten in einem Grid-Layout, zusammen mit ihren entsprechenden CSS-Eigenschaften:
| Tailwind-Klassenname | CSS-Eigenschaften und -werte | Beschreibung |
|---|---|---|
grid-cols-1 | grid-template-columns: repeat(1, minmax(0, 1fr)); | Erstellt ein Grid-Layout mit 1 Spalte. |
grid-cols-2 | grid-template-columns: repeat(2, minmax(0, 1fr)); | Erstellt ein Grid-Layout mit 2 Spalten. |
grid-cols-3 | grid-template-columns: repeat(3, minmax(0, 1fr)); | Erstellt ein Grid-Layout mit 3 Spalten. |
grid-cols-4 | grid-template-columns: repeat(4, minmax(0, 1fr)); | Erstellt ein Grid-Layout mit 4 Spalten. |
grid-cols-5 | grid-template-columns: repeat(5, minmax(0, 1fr)); | Erstellt ein Grid-Layout mit 5 Spalten. |
grid-cols-6 | grid-template-columns: repeat(6, minmax(0, 1fr)); | Erstellt ein Grid-Layout mit 6 Spalten. |
grid-cols-7 | grid-template-columns: repeat(7, minmax(0, 1fr)); | Erstellt ein Grid-Layout mit 7 Spalten. |
grid-cols-8 | grid-template-columns: repeat(8, minmax(0, 1fr)); | Erstellt ein Grid-Layout mit 8 Spalten. |
grid-cols-9 | grid-template-columns: repeat(9, minmax(0, 1fr)); | Erstellt ein Grid-Layout mit 9 Spalten. |
grid-cols-10 | grid-template-columns: repeat(10, minmax(0, 1fr)); | Erstellt ein Grid-Layout mit 10 Spalten. |
grid-cols-11 | grid-template-columns: repeat(11, minmax(0, 1fr)); | Erstellt ein Grid-Layout mit 11 Spalten. |
grid-cols-12 | grid-template-columns: repeat(12, minmax(0, 1fr)); | Erstellt ein Grid-Layout mit 12 Spalten. |
grid-cols-none | grid-template-columns: none; | Erstellt keine Grid-Spalten; untergeordnete Elemente verwenden kein Grid-Layout. |
grid-cols-subgrid | grid-template-columns: subgrid; | Verwendet ein Subgrid-Layout; untergeordnete Elemente erben die Spaltendefinitionen des übergeordneten Grids. |
Beispiel
<div class="grid grid-cols-4 gap-4">
<div>01</div>
<!-- ... -->
<div>09</div>
</div>
<div>01</div>
<!-- ... -->
<div>09</div>
</div>
Selbst ausprobieren »
grid: Aktiviert das Grid-Layout.grid-cols-{n}: Legt die Anzahl der Grid-Spalten fest.gap-{size}: Legt den Abstand zwischen Spalten und Zeilen fest.
Grid-Zeilen und -Spalten
Durchgrid-template-columnsundgrid-template-rowsSteuern Sie die Breite und Höhe von Spalten und Zeilen. Tailwind stellt die folgenden Utility-Klassen zur Steuerung bereit:
grid-cols-{n}: Legt die Anzahl der Grid-Spalten fest (zum Beispiel,grid-cols-3bedeutet drei Spalten).grid-rows-{n}: Legt die Anzahl der Grid-Zeilen fest (zum Beispiel,grid-rows-2bedeutet zwei Zeilen).col-span-{n}: Legt fest, über wie viele Spalten sich ein Element erstreckt.row-span-{n}: Legt fest, über wie viele Zeilen sich ein Element erstreckt.
Beispiel
<div class="grid grid-cols-4 gap-4">
<div>01</div>
<!-- ... -->
<div>05</div>
<div class="grid grid-cols-subgrid gap-4 col-span-3">
<div class="col-start-2">06</div>
</div>
</div>
<div>01</div>
<!-- ... -->
<div>05</div>
<div class="grid grid-cols-subgrid gap-4 col-span-3">
<div class="col-start-2">06</div>
</div>
</div>
Selbst ausprobieren »
Beispiel
<div class="grid grid-cols-3 gap-4">
<div class="...">01</div>
<div class="...">02</div>
<div class="...">03</div>
<div class="col-span-2 ...">04</div>
<div class="...">05</div>
<div class="...">06</div>
<div class="col-span-2 ...">07</div>
</div>
<div class="...">01</div>
<div class="...">02</div>
<div class="...">03</div>
<div class="col-span-2 ...">04</div>
<div class="...">05</div>
<div class="...">06</div>
<div class="col-span-2 ...">07</div>
</div>
Selbst ausprobieren »
Beispiel
<div class="grid grid-rows-3 grid-flow-col gap-4">
<div class="row-span-3 ...">01</div>
<div class="col-span-2 ...">02</div>
<div class="row-span-2 col-span-2 ...">03</div>
</div>
<div class="row-span-3 ...">01</div>
<div class="col-span-2 ...">02</div>
<div class="row-span-2 col-span-2 ...">03</div>
</div>
Selbst ausprobieren »
Grid-Elemente positionieren
grid-column und grid-row steuern die Position jedes Elements im Grid.
Du kannst es mit den folgenden Utility-Klassen festlegen:
col-start-{n}: Legt fest, dass das Element in Spalte n beginnt.col-end-{n}: Legt fest, dass das Element in Spalte n endet.row-start-{n}: Legt fest, dass das Element in Zeile n beginnt.row-end-{n}: Legt fest, dass das Element in Zeile n endet.
Beispiel
<div class="grid grid-cols-6 gap-4">
<div class="col-start-2 col-span-4 ...">01</div>
<div class="col-start-1 col-end-3 ...">02</div>
<div class="col-end-7 col-span-2 ...">03</div>
<div class="col-start-1 col-end-7 ...">04</div>
</div>
<div class="col-start-2 col-span-4 ...">01</div>
<div class="col-start-1 col-end-3 ...">02</div>
<div class="col-end-7 col-span-2 ...">03</div>
<div class="col-start-1 col-end-7 ...">04</div>
</div>
Selbst ausprobieren »
Beispiel
<div class="grid grid-rows-3 grid-flow-col gap-4">
<div class="row-start-2 row-span-2 ...">01</div>
<div class="row-end-3 row-span-2 ...">02</div>
<div class="row-start-1 row-end-4 ...">03</div>
</div>
<div class="row-start-2 row-span-2 ...">01</div>
<div class="row-end-3 row-span-2 ...">02</div>
<div class="row-start-1 row-end-4 ...">03</div>
</div>
Selbst ausprobieren »
Ausrichtung und Verteilung
Ähnlich wie Flexbox bietet Grid auch Optionen zur Ausrichtung und Verteilung.
Die Eigenschaft justify-content wird verwendet, um untergeordnete Elemente innerhalb des Containers entlang der Hauptachse (horizontale Richtung) auszurichten.
| Tailwind-Klassenname | CSS-Eigenschaften und -werte | Beschreibung |
|---|---|---|
justify-normal | justify-content: normal; | Verwendet die Standardausrichtung, normalerweise äquivalent zustart。 |
justify-start | justify-content: flex-start; | Verschiebt alle untergeordneten Elemente an den Anfang des Containers. In einem horizontalen Layout werden untergeordnete Elemente links ausgerichtet. |
justify-end | justify-content: flex-end; | Verschiebt alle untergeordneten Elemente an das Ende des Containers. In einem horizontalen Layout werden untergeordnete Elemente rechts ausgerichtet. |
justify-center | justify-content: center; | Zentriert alle untergeordneten Elemente. |
justify-between | justify-content: space-between; | Verteilt den Raum gleichmäßig zwischen den untergeordneten Elementen und lässt an den Enden keinen Platz übrig. |
justify-around | justify-content: space-around; | Verteilt den Raum gleichmäßig zwischen den untergeordneten Elementen und lässt an den Enden halb so viel Platz übrig. |
justify-evenly | justify-content: space-evenly; | Verteilt den Raum vollständig gleichmäßig zwischen den untergeordneten Elementen, einschließlich des Raums an den Enden. |
justify-stretch | justify-content: stretch; | Dehnt untergeordnete Elemente aus, um den Container zu füllen, wobei jedes untergeordnete Element den gleichen Platz einnimmt. |
Beispiel
<div class="flex justify-start ...">
<div>01</div>
<div>02</div>
<div>03</div>
</div>
<div>01</div>
<div>02</div>
<div>03</div>
</div>
Selbst ausprobieren »
Weitere Ausrichtungseinstellungen:
justify-items: Steuert die Ausrichtung des Inhalts einer Grid-Zelle.justify-self: Steuert die Ausrichtung eines einzelnen Grid-Elements.align-items: Steuert die vertikale Ausrichtung von Grid-Zellen.align-self: Steuert die vertikale Ausrichtung eines einzelnen Grid-Elements.
Beispiel
<div class="grid justify-items-start ...">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
<div>06</div>
</div>
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
<div>06</div>
</div>
Selbst ausprobieren »