Gridのギャップ、正当化、配置
gap-x-*とgap-y-*でグリッドセル間の間隔を追加し、justify-items-*とplace-items-*でグリッド領域内の項目を配置します。
「Gridのギャップ、正当化、配置」はCoddyKit上の無料Tailwind CSS Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTailwind CSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Tailwind CSS Academyコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
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.
よくある質問
「Gridのギャップ、正当化、配置」レッスンは無料ですか？
はい。「Gridのギャップ、正当化、配置」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Tailwind CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Tailwind CSS Academyコースには全4レッスンが含まれています。
「Gridのギャップ、正当化、配置」で何を学びますか？
gap-x-*とgap-y-*でグリッドセル間の間隔を追加し、justify-items-*とplace-items-*でグリッド領域内の項目を配置します。 ブラウザで直接実行するハンズオンコードでTailwind CSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Tailwind CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTailwind CSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「Gridのギャップ、正当化、配置」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTailwind CSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのTailwind CSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Gridの列の定義
- 列と行のまたぎ
- Gridの行と自動配置
- Gridのギャップ、正当化、配置