レイアウトのためのCSS Grid
CSS Gridで行と列を定義し、アイテムを正確に配置し、最小限のコードで一般的なページレイアウトを作成します。
「レイアウトのためのCSS Grid」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。
CSS Gridとは
CSS Gridは2次元レイアウトシステムです。行と列の両方を制御できます。ページ全体の構造や、定義したグリッド上への要素の明示的な配置に最適なツールです。
列の定義：grid-template-columns
grid-template-columnsは列の構造を定義します。固定サイズ（px）、柔軟な分数（fr）、またはautoを使用できます。repeat(n, size)はトラック定義を繰り返します。
.layout {
display: grid;
grid-template-columns: 240px 1fr; /* sidebar + main */
}
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
}fr単位
fr（分数単位）は、残りの空間を比例配分します。1fr 2frでは、2列目に1列目の2倍の空間が割り当てられます。流動的なグリッドトラックには欠かせません。
.layout {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* left center right */
}行の定義：grid-template-rows
行も明示的に定義できます。定義しない場合、ブラウザが暗黙的な行を自動的に作成します。grid-auto-rows: minmax(200px, auto)で暗黙的な行のサイズを設定できます。
.page {
display: grid;
grid-template-rows: auto 1fr auto; /* header content footer */
min-height: 100vh;
}Gridでのgap
Flexboxと同様に、gapは外側の端に影響を与えずにグリッドトラック間の空間を追加します。row-gapとcolumn-gapで軸ごとに個別に制御できます。
.gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}grid-template-areas
文字列でグリッド領域に名前を付け、grid-areaで要素を割り当てます。読みやすく、視覚的にも理解しやすいレイアウトコードを作成できます。
.page {
display: grid;
grid-template-areas:
'header header header'
'sidebar main main'
'footer footer footer';
grid-template-columns: 240px 1fr;
grid-template-rows: auto 1fr auto;
}
header { grid-area: header; }
sidenav { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }grid-columnとgrid-rowでアイテムを配置する
grid-column: start / endとgrid-row: start / endを使うと、アイテムの位置を正確に制御できます。最後のラインを参照するには-1を使用します。span NはN個のトラックにまたがります。
.featured {
grid-column: 1 / -1; /* span all columns */
grid-row: span 2; /* occupy two rows */
}auto-fitとminmax() — レスポンシブな列
レスポンシブグリッドを作成する最も強力な1行の指定は、repeat(auto-fit, minmax(280px, 1fr))です。収まるだけの列を作成し、各列の幅を最低280pxにして、残りの空間を1frで埋めます。
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}auto-fillとauto-fitの違い
auto-fillは空のトラックがあってもトラックを作成し、固定されたグリッドを維持します。auto-fitは空のトラックを縮め、アイテムが行全体を埋めるように拡大します。引き伸ばしたいコンテンツにはauto-fitを使用してください。
暗黙的グリッドと明示的グリッド
定義したトラックが明示的グリッドです。定義したトラック数を超えるアイテムを追加すると、ブラウザが暗黙的トラックを作成します。サイズはgrid-auto-rowsとgrid-auto-columnsで制御できます。
GridとFlexbox — 使い分け
Gridは2次元レイアウト、ページ構造、ギャラリー、ダッシュボードに適しています。Flexboxは1次元の行や積み重ね、中央揃え、行内でのアイテムの分配に適しています。両者は補完関係にあります。ページの骨格にはGridを、コンポーネント内部にはFlexboxを使用してください。
クイックチェック
幅が250px以上で、残りの空間を均等に分ける列を作成するCSSの値はどれでしょうか。
復習：CSS Grid
grid-template-columnsは列を定義します。frは空間を分配します。repeat()は繰り返しを簡略化します。gapは余白を追加します。grid-template-areasはレイアウトを読みやすくします。auto-fitとminmaxを組み合わせると、メディアクエリなしでレスポンシブグリッドを作成できます。Gridは2次元のページレイアウトに適した標準的な選択肢です。
よくある質問
「レイアウトのためのCSS Grid」レッスンは無料ですか？
はい。「レイアウトのためのCSS Grid」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。
「レイアウトのためのCSS Grid」で何を学びますか？
CSS Gridで行と列を定義し、アイテムを正確に配置し、最小限のコードで一般的なページレイアウトを作成します。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Frontend Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「レイアウトのためのCSS Grid」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このFrontend Academyレッスンでコードを書いて実行できますか？
はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- viewportメタタグ
- レイアウトのためのFlexbox
- レイアウトのためのCSS Grid
- メディアクエリとモバイルファースト開発