Gap, Justify, and Align in Grid
Add spacing between grid cells with gap-x-* and gap-y-*, and align items within grid areas using justify-items-* and place-items-*.
Gap, Justify, and Align in Grid is a free Tailwind CSS Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Tailwind CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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.
Frequently asked questions
Is the “Gap, Justify, and Align in Grid” lesson free?
Yes — the full text of “Gap, Justify, and Align in Grid” is free to read here on the web, and the Tailwind CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Tailwind CSS Academy course, upgrade to CoddyKit PRO.
What will I learn in “Gap, Justify, and Align in Grid”?
Add spacing between grid cells with gap-x-* and gap-y-*, and align items within grid areas using justify-items-* and place-items-*. You practise Tailwind CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Tailwind CSS Academy?
No prior experience is required. Tailwind CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Gap, Justify, and Align in Grid” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Tailwind CSS Academy lesson?
Yes. Every Tailwind CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Defining Grid Columns
- Column and Row Spanning
- Grid Rows and Auto Placement
- Gap, Justify, and Align in Grid