Frontend Academy · レッスン

CSS Grid：template-areas・auto-fit・minmax

グリッド領域に名前を付けて読みやすいレイアウトを作り、auto-fit と minmax() でレスポンシブな列を設定し、暗黙的なトラックを制御します。

「CSS Grid：template-areas・auto-fit・minmax」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

名前付きテンプレート領域 — 視覚的なレイアウト

grid-template-areasを使うと、視覚的なASCIIアート形式で領域に名前を付けられます。各文字列が1行、各単語が1つのセルを表します。ドット（.）は空のセルを表します。grid-area: nameで要素を割り当てます。

.layout {
  display: grid;
  grid-template-areas:
    'header header'
    'sidebar main'
    'footer  footer';
  grid-template-columns: 240px 1fr;
  grid-template-rows: 60px 1fr 48px;
  min-height: 100vh;
}
header  { grid-area: header;  }
.sidebar { grid-area: sidebar; }
main    { grid-area: main;    }
footer  { grid-area: footer;  }

メディアクエリによるレスポンシブなテンプレート領域

ブレークポイントでtemplate-areasのレイアウトを変更すると、モバイルではサイドバーを列からメインコンテンツの下へ移動できます。

.layout {
  grid-template-areas:
    'header'
    'main'
    'sidebar'
    'footer';
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .layout {
    grid-template-areas:
      'header  header'
      'sidebar main'
      'footer  footer';
    grid-template-columns: 220px 1fr;
  }
}

auto-fitとauto-fill

auto-fitは空のトラックを折りたたみ、アイテムが行全体に広がるようにします。auto-fillはトラックが空でもグリッド構造を維持します。レスポンシブなカードグリッドでは、ほとんどの場合auto-fitが適しています。

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

minmax()の詳細

minmax(min, max)は、最小値min以上、最大値max以下のトラックを定義します。よく使う組み合わせには、minmax(0, 1fr)（完全に柔軟）、minmax(200px, 1fr)（最小値付きのレスポンシブ設定）、minmax(auto, auto)（コンテンツに合わせたサイズ）があります。

列と行のまたがり

grid-column: span 2を使うと、アイテムを2列にまたがらせることができます。grid-row: span 2と組み合わせると、グリッド内で2×2の領域を占める目立つアイテムを作成できます。

.featured {
  grid-column: span 2;
  grid-row: span 2;
}

/* Or explicit placement: */
.featured {
  grid-column: 1 / 3;  /* from line 1 to line 3 */
  grid-row: 1 / 3;
}

密な自動配置

grid-auto-flow: denseは、小さなアイテムで空いた間隔を埋めます。アイテムのサイズが異なる、メイソンリー風のレイアウトに便利です。

.mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense;
  gap: 8px;
}

fr単位とパーセンテージ

fr単位は、固定サイズのトラックと間隔を差し引いた後の利用可能な空間を常に表します。frと固定サイズを組み合わせると、固定されたサイドバーと柔軟なメイン領域のように、柔軟性の高いレイアウトを作成できます。

grid-auto-columnsとgrid-auto-rows

これらは、暗黙的に作成されるトラックのサイズを制御します（アイテムが明示的なグリッドの外側に配置された場合など）。grid-auto-rows: minmax(100px, auto)を設定すると、暗黙的な行に最小の高さを指定できます。

.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 8px;
}

DevToolsでのグリッド検証

Elementsパネルでグリッドコンテナーの横にある「grid」バッジをクリックすると、Chrome DevToolsがページ上にグリッド線と領域名を重ねて表示します。予期しないトラックサイズやアイテムの配置を調査するために使用できます。

CSS Subgrid

grid-template-columns: subgridを使うと、ネストしたグリッドを親グリッドのトラックに揃えられます。2023年以降、すべての最新ブラウザーが対応しており、カードグリッド内で各カードの内部を揃えるために不可欠です。

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid; /* aligns to parent rows */
}

FlexboxよりGridが適している場合

行と列の両方が重要で、2次元の明示的な制御が必要な場合はGridが適しています。アイテムを横一列や縦方向に並べるだけなら、Flexboxのほうがシンプルです。

確認問題

最小幅200pxで収まるだけの列を作り、各列が残りの空間を均等に分けるCSS Gridの値はどれですか？

まとめ：CSS Gridの応用

grid-template-areasで読みやすい名前付きレイアウトを作成できます。auto-fitとminmaxを組み合わせると、メディアクエリなしでレスポンシブグリッドを作成できます。アイテムを列や行にまたがらせることができます。denseの自動配置で空間を埋められます。DevToolsのグリッドオーバーレイで問題を調査できます。Subgridでネストしたアイテムを親のトラックに揃えられます。

よくある質問

「CSS Grid：template-areas・auto-fit・minmax」レッスンは無料ですか？

はい。「CSS Grid：template-areas・auto-fit・minmax」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「CSS Grid：template-areas・auto-fit・minmax」で何を学びますか？

グリッド領域に名前を付けて読みやすいレイアウトを作り、auto-fit と minmax() でレスポンシブな列を設定し、暗黙的なトラックを制御します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「CSS Grid：template-areas・auto-fit・minmax」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る