Gapとグリッド配置
gapでグリッドセル間に間隔を追加し、grid-columnとgrid-rowでアイテムを配置します。
「Gapとグリッド配置」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
CSS Gridのギャップ
gapプロパティは、グリッドの行と列の間隔を設定します。以前のgrid-gapプロパティに代わるもので、Flexboxでも使用できます。
<div class="grid">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">1</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">2</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">3</div>
<div style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:12px;border-radius:4px;">4</div>
<div style="background:#b57bff22;border:1px solid #b57bff;padding:12px;border-radius:4px;">5</div>
<div style="background:#3fd0c922;border:1px solid #3fd0c9;padding:12px;border-radius:4px;">6</div>
</div>row-gapとcolumn-gap
行と列のギャップは個別に設定できます。
<div class="grid" style="display:grid;grid-template-columns:repeat(3, 1fr);">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">1</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">2</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">3</div>
<div style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:12px;border-radius:4px;">4</div>
<div style="background:#b57bff22;border:1px solid #b57bff;padding:12px;border-radius:4px;">5</div>
<div style="background:#3fd0c922;border:1px solid #3fd0c9;padding:12px;border-radius:4px;">6</div>
</div>グリッドラインの番号
CSS Gridは、1から始まるライン番号を割り当てます。3列のグリッドには、列ライン1、2、3、4があります。負の番号は末尾から数えます。-1は最後のライン、-2は最後から2番目のラインです。
grid-columnとgrid-row
grid-columnとgrid-rowでライン番号を指定すると、項目を手動で配置できます。
<div style="display:grid;grid-template-columns:repeat(3, 1fr);grid-auto-rows:60px;gap:8px;">
<div class="header" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header (spans all 3 columns, row 1)</div>
<div class="main" style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main (spans 2 columns, row 2)</div>
</div>spanキーワード
絶対的なライン番号の代わりにspanを使うと、項目がまたぐトラック数を表せます。
<div style="display:grid;grid-template-columns:repeat(4, 60px);grid-auto-rows:60px;gap:8px;">
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
<div class="featured" style="background:#4f8cff22;border:1px solid #4f8cff;padding:4px;">Featured (span 2x2)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
</div>負のライン番号
負のインデックスは末尾から数えます。1 / -1を指定すると、列数に関係なく常にグリッド全体の幅にまたがります。
<div style="display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;">
<div class="full-width" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Full width (grid-column: 1 / -1)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Item</div>
<div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Item</div>
</div>grid-areaのショートハンド
grid-areaは、4つのグリッド配置値を1つのプロパティで設定します。値の順序はrow-start / column-start / row-end / column-endです。
<div style="display:grid;grid-template-columns:repeat(3, 1fr);grid-auto-rows:60px;gap:0;">
<div class="hero" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Hero (row 1 start, col 1 start, row 2 end, last column)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
</div>自動配置
明示的に配置していない項目は、grid-auto-flowのアルゴリズムに従い、次に利用可能なセルへ自動配置されます。デフォルトでは、ブラウザーは左から右、上から下の順にセルを埋めます。
Gridでのjustify-itemsとalign-items
グリッドコンテナでは、justify-itemsがセルの内容を水平方向に揃え、align-itemsが垂直方向に揃えます。どちらもデフォルト値はstretchです。
<div class="grid" style="min-height:120px;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;width:fit-content;">centered, top-aligned item</div>
</div>justify-selfとalign-self
個々のグリッド項目では、justify-selfとalign-selfを使ってコンテナの配置設定を上書きできます。
<div style="display:grid;grid-template-columns:1fr;min-height:120px;">
<div class="featured-card" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Stretched horizontally, centered vertically</div>
</div>グリッド項目の重なり
複数の項目を同じグリッドセルに配置できます。z-indexを使うと、どの項目を上に表示するかを制御できます。これにより、画像とオーバーレイテキストを重ねるようなレイヤー構造を作成できます。
<div style="display:grid;grid-template-columns:repeat(2, 1fr);grid-template-rows:repeat(2, 60px);">
<div class="image" style="background:#4f8cff44;border:1px solid #4f8cff;">Image layer</div>
<div class="caption" style="background:rgba(0,0,0,0.6);color:#fff;align-self:end;padding:4px 8px;">Caption overlay</div>
</div>確認問題
ある項目にgrid-column: 2 / span 3が指定されています。5列のグリッドでは、どの列を占有しますか。
まとめ
gapはグリッドセル間に余白を追加します。項目はgrid-columnとgrid-rowでライン番号を指定して配置します。spanキーワードは、またぐトラック数を指定します。1 / -1を使うと、常にすべての列にまたがります。グリッド項目はz-indexを使って重ねることができます。
よくある質問
「Gapとグリッド配置」レッスンは無料ですか？
はい。「Gapとグリッド配置」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「Gapとグリッド配置」で何を学びますか？
gapでグリッドセル間に間隔を追加し、grid-columnとgrid-rowでアイテムを配置します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「Gapとグリッド配置」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。