CSS Gridの理解を深める-ド初級-

はじめに

HTMLやCSSで「横2列×縦3行」みたいな表レイアウトを作る場合、昔は

を使っていましたが、CSS Gridを使えば、もっと柔軟に「行と列」を自由に組めるようになります。
なかなか直感的に理解できなかったため、改めて理解を深めます。

1. Gridの基本

gridを使うには

親要素に display: grid; を指定する。
子要素は「セル（マス目）」のように配置される。

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

.grid {
  display: grid;
  grid-template-columns: 100px 1fr; /* 列の幅 */
  grid-template-rows: repeat(3, auto); /* 行の高さ */
}

イメージ（ヘッダーは含めない）

100px	残り全部
1行目
2行目
3行目

ポイント

• grid-template-columns → 列の幅を定義（今回は2列）
• grid-template-rows → 行の高さを定義（今回は3行）
• 1fr → 残りの幅を均等に分ける（fractionの略

補足

• repeat()
  repeat() は 同じパターンを繰り返す ときに使う関数。
  上記の例では、「auto の高さをもつ行を3つ作る」という意味。
  （別例）100px幅の列を2つ作る
  grid-template-columns: 100px 100px;
• auto
  auto は 「中身のサイズに合わせる」 という意味。

2. 子要素の配置指定（grid-column, grid-row）

子要素は、どのマス（セル）に置くかを grid-column と grid-row で指定します。

<div class="grid">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
  <div class="d">D</div>
  <div class="e">E</div>
  <div class="f">F</div>
</div>

.grid {
  display: grid;
  grid-template-columns: 120px 1fr;
  grid-template-rows: repeat(3, auto);
}

.a { grid-column: 1 / 2; grid-row: 1; } /* 1行目1列目 */
.b { grid-column: 2 / 3; grid-row: 1; } /* 1行目2列目 */
.c { grid-column: 1 / 2; grid-row: 2; } /* 2行目1列目 */
.d { grid-column: 2 / 3; grid-row: 2; } /* 2行目2列目 */
.e { grid-column: 1 / 2; grid-row: 3; } /* 3行目1列目 */
.f { grid-column: 2 / 3; grid-row: 3; } /* 3行目2列目 */

イメージ（ヘッダーは含めない）

120px	残り全部
A (.a)	B (.b)
C (.c)	D (.d)
E (.e)	F (.f)

ポイント

• grid-column・grid-rowの考え方
  grid-column: 1 / 2; は「1列目の線から2列目の線まで使う」という意味。

  列の線番号: |1----120px----|2----------残り----------|
  行の線番号: ↑1             ↑2                       ↑3
  

　ということは、、、
　.a { grid-column: 1 / 2; grid-row: 1; }
　：grid-column: 1 / 2 → 1列目に配置
　.b { grid-column: 2 / 3; grid-row: 2; }
　：grid-column: 2 / 3 → 2列目に配置
　.a { grid-column: 1 / 2; grid-row: 1; }
　：grid-row: 1 → 1行目に配置
　.b { grid-column: 2 / 3; grid-row: 2; }
　：grid-row: 2 → 2行目に配置

3. 【応用】1セルに複数行・列をまたぐ

セルを複数跨ぐとき

.item {
 grid-column: 1 / 3; /* 横2列ぶんまたぐ */
 grid-row: 1 / 3; /* 縦2行ぶんまたぐ */
}

4. React + MUIで書くとき

MUI（@mui/material）を使って、CSS Gridで表のようなレイアウトを作っているReactコンポーネントで書いてみる。
(特にひねりはない、、、)

<TableRow
  sx={{
    display: 'grid',
    gridTemplateColumns: '120px 1fr',
    gridTemplateRows: 'repeat(3, auto)',
  }}
>
  <TableHead sx={{ gridColumn: '1 / 2', gridRow: '1' }}>ヘッダ1</TableHead>
  <TableCell sx={{ gridColumn: '2 / 3', gridRow: '1' }}>セル1</TableCell>

  <TableHead sx={{ gridColumn: '1 / 2', gridRow: '2' }}>ヘッダ2</TableHead>
  <TableCell sx={{ gridColumn: '2 / 3', gridRow: '2' }}>セル2</TableCell>

  <TableHead sx={{ gridColumn: '1 / 2', gridRow: '3' }}>ヘッダ3</TableHead>
  <TableCell sx={{ gridColumn: '2 / 3', gridRow: '3' }}>セル3</TableCell>
</TableRow>

イメージ

ヘッダ1	セル1
ヘッダ2	セル2
ヘッダ3	セル3

まとめ

もはやこれ！！

用語	意味
display: grid	グリッドレイアウトを使う宣言
grid-template-columns	列の数と幅を定義
grid-template-rows	行の数と高さを定義
grid-column	どの列に置くかを指定
grid-row	どの行に置くかを指定
fr	残りの幅を均等配分