CSS講座 / Gridの基礎：行・列・ラインとアイテム配置

CSS講座

CSS Gridは行と列を定義して、直接の子を二次元に配置する仕組みです。ラインがトラックやセルの境界になり、HTMLの順番を変えずに、一つのアイテムを複数の列へ広げられます。

コンテナー・ライン・トラック・セルを区別する

display: gridを付けた親がGridコンテナー、その直接の子がGridアイテムです。子の中の要素は外側Gridの独立したアイテムにはなりません。CSSで線を定義しても、新しいHTML要素が作られるわけではありません。

二列二行なら縦にも横にも三本のラインがあります。隣り合う二本のラインの間が、一行または一列のトラックです。一行と一列の交点の最小領域がセルで、一つ以上のセルをまとめた長方形がエリアです。列数とライン番号を混同しないでください。

gapはトラック間の間隔で、アイテム内のpaddingやborderとは別です。開発者ツールのGrid表示を有効にすると境界を追いやすくなります。MDNのGrid基本概念で用語を確認できます。

px・パーセント・frで列を定義する

.grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
}

この部分コードは、後の完全例の.grid内で列の指定を置き換えて比較できます。160pxと1frなら最初の列を固定し、残りを次の列へ配分します。frは、他のトラックやgapを考慮した残りの空間を分ける割合です。

幅640px、gap16px、1frと2frなら、配分対象は624pxです。最小サイズの制約がなければ208pxと416pxになります。完全例はminmax(0, 1fr)とminmax(0, 2fr)で、内容によるトラックの自動最小幅の影響を抑えています。

50%と50%で全幅を使った後にgap16pxを加えると、はみ出すことがあります。残りを分けたいならfrを検討しますが、すべてを均等にする必要はありません。短い名称と長い説明など、内容の役割で比率や固定幅を選びます。

明示した行と自動的にできる行を比べる

grid-template-rows: 80pxは最初の一行を明示します。配置にさらに行が必要なら暗黙の行が作られ、そのサイズはgrid-auto-rowsで指定できます。二列を作ったから二行までという制限にはなりません。

固定の100pxは内容が長くても行自体を広げません。minmax(100px, auto)なら最低100pxを確保して、必要なときに伸びられます。すべての行を同じ高さにする指定ではなく、各行の内容や配置条件で結果が決まります。autoも内容とコンテナーの空き・整列の影響を受けます。

翻訳や文字拡大で増える説明には、必要に応じて伸びる行が扱いやすくなります。MDNのgrid-auto-rowsを参照してください。

ラインとspanで配置する

.feature {
  grid-column: 1 / -1;
}
/* Different representations spanning two columns in the same two-column explicit grid */
/* .feature { grid-column: span 2; } */

1 / -1は明示的Gridの最初から最後のラインまでを意味します。二列でも一列でも全幅にしたい見出しなどに使えます。負の番号は明示的Gridの終わりを基準にし、自動で増えたすべてのトラックの終端を表すわけではありません。

span 2は二つのトラックを占める指定です。開始位置がなければ自動配置に任せます。一列へ切り替えた後もspan 2を残すと、意図しない列を増やす場合があります。全幅を維持するなら1 / -1を使うか、画面幅に応じてspanも見直します。繰り返しはrepeatと自動列で比較します。

完全な例で幅・高さ・全幅を測る

次をgrid-basics.htmlとしてUTF-8で保存します。AとBが固定の最初の行、Cが全幅の自動行、DとEが次の自動行です。480px以下では一列になります。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>grid-basics.html</title>
  <style>
* { box-sizing: border-box; }
body { margin: 16px; font: 16px/1.6 sans-serif; color: #243447; }
h1 { font-size: 24px; } h2 { font-size: 20px; margin-top: 32px; }
a { color: #145f8f; } a:focus-visible { outline: 3px solid #b4470b; outline-offset: 3px; }
.grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
 grid-template-rows: 80px; grid-auto-rows: minmax(100px, auto); gap: 16px;
 width: min(100%, 640px); }
 .grid > div { min-width: 0; padding: 12px; background: #dceefa; overflow-wrap: anywhere; }
 .feature { grid-column: 1 / -1; }
 @media (max-width: 480px) { .grid { grid-template-columns: minmax(0, 1fr); } }
  </style>
</head>
<body>
<h1>Column proportions and row heights</h1>
<div class="grid"><div>A: first row</div><div>B: first row</div><div class="feature">C: Area that occupies two columns. As the content grows, the height of this auto-row also increases.</div><div>D: next line</div><div>E: This card has a long description. The height you need will vary depending on the length of your content. Instead of forcing all content to fit at a fixed height, set it to accommodate content beyond the minimum height.</div></div>
</body>
</html>

.gridが640pxのとき、列が208px・416px、間が16pxか確認します。比率だけを1:1へ変えると312pxずつになります。1:2へ戻します。
Aの文章を増やすと固定80pxの行からはみ出す場合があります。文章を戻し、行だけをminmax(80px, auto)へ変えて比べます。
Cの文章を十分に増やし、minmax(100px, auto)が伸びることを見ます。grid-auto-rowsだけを100pxへ変えて固定との差を確認し、元へ戻します。
Cのgrid-columnを外すと一セルに収まり、後ろの配置も変わります。1 / -1へ戻し、480px以下でも全幅になるか確認します。

狭い画面と長い内容を扱う

1frのトラックは、自動最小サイズによって長い文字列の幅を要求することがあります。minmax(0, 1fr)はトラックの最小値を0にする指定で、文字列の折り返しとは別です。状況に応じてアイテム自身のmin-width: 0も使います。

次をgrid-long-text.htmlとして保存して比較します。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>grid-long-text.html</title>
  <style>
* { box-sizing: border-box; }
body { margin: 16px; font: 16px/1.6 sans-serif; color: #243447; }
h1 { font-size: 24px; } h2 { font-size: 20px; margin-top: 32px; }
a { color: #145f8f; } a:focus-visible { outline: 3px solid #b4470b; outline-offset: 3px; }
.grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px;
 width: min(100%, 600px); }
 .grid > div { padding: 12px; background: #e8f5de; overflow-wrap: anywhere; }
  </style>
</head>
<body>
<h1>Grid minimum size and long strings</h1><div class="grid"><div>ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</div><div>A description of ordinary length</div></div>
</body>
</html>

overflow-wrapだけをnormalへ変え、トラックが収まっても文字が外へ出ることを見ます。両列を1fr 1frへ変える比較では、長い文字列の最小幅が列幅にも影響するか観察します。最後は両方のminmaxとanywhereを復元します。

480pxは実習用の切り替え位置で、全サイト共通の端末境界ではありません。内容が読みにくくなる幅を基準に調整します。固定行、長い文字列、spanで増えた列を分けて調べると原因を絞れます。はみ出しと改行も確認してください。

CSS講座