Abstände, Rechtfertigung und Ausrichtung im Grid
Fügen Sie mit gap-x-* und gap-y-* Abstände zwischen Grid-Zellen hinzu und richten Sie Elemente innerhalb von Grid-Bereichen mit justify-items-* und place-items-* aus.
Abstände, Rechtfertigung und Ausrichtung im Grid ist eine kostenlose Tailwind CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Tailwind CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Tailwind CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
Spacing Between Grid Cells
Once your grid columns and rows are defined, the next step is controlling the space between cells. Tailwind's gap-* utilities map directly to the CSS gap shorthand, which sets both row and column gutters simultaneously. A single gap-4 (16px) class gives consistent spacing in all directions, keeping your layout balanced without any custom CSS.
<!-- Uniform gap in all directions -->
<div class="grid grid-cols-3 gap-4">
<div class="bg-blue-100 p-4 rounded">A</div>
<div class="bg-blue-100 p-4 rounded">B</div>
<div class="bg-blue-100 p-4 rounded">C</div>
<div class="bg-blue-100 p-4 rounded">D</div>
<div class="bg-blue-100 p-4 rounded">E</div>
<div class="bg-blue-100 p-4 rounded">F</div>
</div>gap-x-* and gap-y-* Utilities
When you need different spacing between columns versus between rows, use gap-x-* for horizontal gutters and gap-y-* for vertical gutters. For example, gap-x-8 gap-y-4 gives wide horizontal space between columns and tighter vertical space between rows. This lets you fine-tune the visual rhythm of your grid independently in each direction.
<!-- Wide horizontal gap, tight vertical gap -->
<div class="grid grid-cols-3 gap-x-10 gap-y-2">
<div class="bg-green-100 p-3 rounded">A</div>
<div class="bg-green-100 p-3 rounded">B</div>
<div class="bg-green-100 p-3 rounded">C</div>
<div class="bg-green-100 p-3 rounded">D</div>
<div class="bg-green-100 p-3 rounded">E</div>
<div class="bg-green-100 p-3 rounded">F</div>
</div>Justify Items — Horizontal Cell Alignment
justify-items-* controls how items are aligned horizontally within their grid cell. The four values are justify-items-start, justify-items-center, justify-items-end, and justify-items-stretch (the default). When items are stretched, they fill the full width of their cell. Centering is common for icon-based grids where you want each icon centered in its column.
<!-- Icons centered within each grid cell -->
<div class="grid grid-cols-4 gap-6 justify-items-center">
<div class="text-4xl">📷</div>
<div class="text-4xl">🎵</div>
<div class="text-4xl">📚</div>
<div class="text-4xl">🎮</div>
</div>Align Items — Vertical Cell Alignment
align-items-* in a grid context controls how items align vertically within their row track. items-start anchors items to the top of the row, items-center vertically centers them, and items-end pushes them to the bottom. The default is items-stretch, making items fill their row height. This is different from Flexbox's align-items but uses the same class names in Tailwind.
<!-- Grid row with mixed-height cells, items aligned to center -->
<div class="grid grid-cols-3 gap-4 items-center h-32">
<div class="bg-purple-200 p-2 rounded h-8">Short</div>
<div class="bg-purple-200 p-6 rounded">Tall</div>
<div class="bg-purple-200 p-2 rounded h-12">Medium</div>
</div>place-items for Both Axes at Once
The place-items-* utility is a shorthand that sets both align-items and justify-items simultaneously. place-items-center perfectly centers each grid item both horizontally and vertically within its cell — a two-liner that previously required two separate CSS properties. This is ideal for icon grids, avatar displays, and any grid where items need to float in the middle of their cells.
<!-- Avatar cards, each item perfectly centered in its cell -->
<div class="grid grid-cols-4 gap-4 place-items-center">
<div class="w-16 h-16 bg-red-400 rounded-full flex items-center justify-center text-white font-bold">JD</div>
<div class="w-16 h-16 bg-blue-400 rounded-full flex items-center justify-center text-white font-bold">AB</div>
<div class="w-16 h-16 bg-green-400 rounded-full flex items-center justify-center text-white font-bold">CK</div>
<div class="w-16 h-16 bg-yellow-400 rounded-full flex items-center justify-center text-white font-bold">MR</div>
</div>Justify Content — Aligning the Whole Grid
When the total width of your grid columns is less than the container width, justify-content-* positions the entire grid block horizontally within the container. justify-center centers the column group, justify-between spreads columns to the edges, and justify-around adds even space around each column. This is distinct from justify-items, which aligns items within cells.
<!-- Fixed-width columns centered within a wide container -->
<div class="grid gap-4 justify-center" style="grid-template-columns: repeat(3, 100px)">
<div class="bg-orange-100 p-4 rounded">A</div>
<div class="bg-orange-100 p-4 rounded">B</div>
<div class="bg-orange-100 p-4 rounded">C</div>
</div>Align Content — Vertical Grid Positioning
align-content-* controls how the entire set of grid rows is positioned vertically when total row height is less than the container. content-center vertically centers all rows, content-between spreads them to the top and bottom, and content-evenly distributes them with equal space. This is particularly useful in fixed-height containers like a dashboard widget.
<!-- 2 rows centered in a tall container -->
<div class="grid grid-cols-2 gap-4 h-64 content-center">
<div class="bg-teal-100 p-4 rounded">Row 1, A</div>
<div class="bg-teal-100 p-4 rounded">Row 1, B</div>
<div class="bg-teal-100 p-4 rounded">Row 2, A</div>
<div class="bg-teal-100 p-4 rounded">Row 2, B</div>
</div>place-content — Grid-Level Shorthand
place-content-* is the shorthand that combines align-content and justify-content in one utility. place-content-center centers the entire grid in its container both horizontally and vertically. This is useful for centered full-screen grids, loading screens, or any time you want the grid block itself to sit in the middle of a larger area.
<!-- Grid block centered inside the viewport -->
<div class="grid h-screen place-content-center gap-6" style="grid-template-columns: repeat(2, 200px)">
<div class="bg-sky-200 p-8 rounded text-center">Option A</div>
<div class="bg-sky-200 p-8 rounded text-center">Option B</div>
</div>Per-Item Overrides With justify-self and align-self
Sometimes you need one specific item to behave differently from the rest of the grid. justify-self-* overrides justify-items for a single cell, and align-self-* overrides align-items. For instance, you might use justify-self-end to push a single action button to the right inside its cell while all other cells remain left-aligned.
<!-- Most items default, but last button right-aligned -->
<div class="grid grid-cols-3 gap-4 items-start">
<div class="bg-gray-100 p-4">Content A</div>
<div class="bg-gray-100 p-4">Content B</div>
<button class="justify-self-end bg-blue-500 text-white px-4 py-2 rounded self-center">
Action
</button>
</div>place-self — Per-Item Shorthand
place-self-* is the per-item shorthand combining align-self and justify-self. The most powerful value is place-self-center, which centers an individual item both horizontally and vertically within its cell, regardless of what the parent grid specifies. This is handy for centering an icon or spinner inside a fixed-size grid cell.
<!-- One loading spinner centered in its grid cell -->
<div class="grid grid-cols-3 gap-4 h-32">
<div class="bg-gray-100 p-4 rounded">Content</div>
<div class="bg-gray-100 rounded place-self-center">
<div class="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
</div>
<div class="bg-gray-100 p-4 rounded">Content</div>
</div>Complete Grid Alignment Reference
Here is a quick mental model for grid alignment in Tailwind: justify-items / align-items — align children within cells (item level). justify-content / align-content — position the whole grid block within the container (track level). justify-self / align-self — override alignment for a single item. Pair these with the shorthand place-* variants to handle both axes at once.
<!-- Summary: centered grid, stretched items, one overridden -->
<div class="grid grid-cols-3 gap-6 place-content-center place-items-center h-48">
<div class="w-20 h-20 bg-indigo-200 rounded flex items-center justify-center">A</div>
<div class="w-20 h-20 bg-indigo-300 rounded flex items-center justify-center">B</div>
<!-- Override: this item aligns to end instead of center -->
<div class="w-20 h-20 bg-indigo-400 rounded flex items-center justify-center self-end">
C
</div>
</div>Quick Check
Test your understanding of Tailwind CSS Mastery concepts from this lesson.
Lesson Recap
In this lesson you learned: gap-x-* and gap-y-* control horizontal and vertical gutters independently, justify-items and align-items position content within each grid cell, and justify-content and align-content position the entire grid within its container. Next up we move to sizing utilities that control element widths and heights.
Häufig gestellte Fragen
Ist die Lektion „Abstände, Rechtfertigung und Ausrichtung im Grid“ kostenlos?
Ja — der vollständige Text von „Abstände, Rechtfertigung und Ausrichtung im Grid“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Tailwind CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Tailwind CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Abstände, Rechtfertigung und Ausrichtung im Grid“?
Fügen Sie mit gap-x-* und gap-y-* Abstände zwischen Grid-Zellen hinzu und richten Sie Elemente innerhalb von Grid-Bereichen mit justify-items-* und place-items-* aus. Du übst Tailwind CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Tailwind CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. Tailwind CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Abstände, Rechtfertigung und Ausrichtung im Grid“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Tailwind CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede Tailwind CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Grid-Spalten definieren
- Spannen über Spalten und Zeilen
- Grid-Zeilen und automatische Platzierung
- Abstände, Rechtfertigung und Ausrichtung im Grid