0Pricing
CSS Academy · レッスン

Display Gridとテンプレートの列・行

CSS Gridを有効にし、grid-template-columnsとgrid-template-rowsで列と行のトラックを定義します。

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

CSS Grid の有効化

コンテナに display: grid を設定すると、CSS Grid が有効になります。その直接の子要素は自動的にグリッドアイテムになり、セルに配置されます。

<div class="layout">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">Item A</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">Item B</div>
  <div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">Item C</div>
</div>

grid-template-columns

grid-template-columns は、列の数とサイズを定義します。各値によって1つの列トラックが作成されます。

<div class="layout">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">200px column</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">1fr column</div>
  <div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">1fr column</div>
</div>

grid-template-rows

grid-template-rows は、明示的な行トラックを定義します。定義された行を超えたアイテムによって、暗黙的な行が作成されます。

<div class="layout" style="min-height:220px;">
  <div style="grid-column:span 2;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header (row: auto)</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main left (row: 1fr)</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main right (row: 1fr)</div>
  <div style="grid-column:span 2;background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer (row: auto)</div>
</div>

列トラックと行トラック

grid-template-columns または grid-template-rows の各値によって、1つのトラックが作成されます。トラックには任意のサイズ単位を使用できます。

  • 固定：200px、10rem
  • 柔軟：1fr
  • コンテンツ基準：auto、min-content、max-content

fr単位

fr（fraction単位）は、固定サイズを差し引いた後の利用可能な空間を分配します。1fr 2frでは、1:2の比率で列が作成されます。

<div class="grid">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">300px fixed</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">1fr (1x share)</div>
  <div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">2fr (2x share)</div>
</div>

トラック内のauto

トラックのautoは、コンテンツに合わせてサイズを決定します。列では最も幅の広いセルに必要な最小幅になり、行では最も高いセルに合う高さになります。

<div class="sidebar-layout">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Sidebar (auto width)</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main content (1fr fills the rest)</div>
</div>

ページレイアウトの例

ヘッダー、メインコンテンツ、フッターで構成される、一般的な3行のページレイアウトです。

<div class="page">
  <header style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</header>
  <main style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main (fills available space)</main>
  <footer style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer</footer>
</div>

grid-templateのショートハンド

grid-templateは行と列をまとめて指定します。

<div class="grid" style="display:grid;min-height:180px;">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main</div>
  <div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer</div>
</div>

DevToolsでGridを検証する

ChromeとFirefoxのDevToolsでは、ページ上にグリッドのトラック線をオーバーレイ表示できます。Elementsパネルでグリッドバッジをクリックすると、列、行、ギャップ、名前付きエリアを視覚化できます。

GridとFlexboxの使い分け

行と列の両方を同時に制御する必要がある場合はGridを使用します。1次元レイアウト（項目を横一列または縦一列に並べるレイアウト）にはFlexboxを使用します。両方を組み合わせるレイアウトも多くあります。

ライン番号

Gridは、1から始まるライン番号を自動的に割り当てます。これらの番号を参照して、項目を手動で配置できます。列ラインは、列数をnとすると1からn+1までになります。

<div style="display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;">
  <div class="header" style="grid-column:1 / -1;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header — spans all columns (grid-column: 1 / -1)</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Item 2</div>
  <div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Item 3</div>
</div>

確認問題

grid-template-columns: 200px 1fr 2frは何を作成しますか。

まとめ

display: gridはグリッドコンテナを作成します。grid-template-columnsとgrid-template-rowsでトラックを定義します。fr単位は、残りの空間を比例配分します。autoはコンテンツに合わせてサイズを決定します。Gridは2次元レイアウトの制御に適しています。

よくある質問

「Display Gridとテンプレートの列・行」レッスンは無料ですか？

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

「Display Gridとテンプレートの列・行」で何を学びますか？

CSS Gridを有効にし、grid-template-columnsとgrid-template-rowsで列と行のトラックを定義します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「Display Gridとテンプレートの列・行」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. Display Gridとテンプレートの列・行
  2. fr単位とRepeat
  3. Gapとグリッド配置
  4. グリッドテンプレート領域
← CSS Academyに戻る