CSS ・ Flexbox・Grid
grid-template-columns
グリッドの列
Gridレイアウトで、列の数と幅を定義します。fr単位や repeat() を使うと、柔軟な段組みを短く書けます。
01
サンプルコード
HTML
1<div class="grid">
2 <div>1</div>
3 <div>2</div>
4 <div>3</div>
5 <div>4</div>
6 <div>5</div>
7 <div>6</div>
8</div>
CSS
1.grid {
2 display: grid;
3 grid-template-columns: repeat(3, 1fr);
4 gap: 8px;
5}
6.grid div {
7 padding: 16px;
8 text-align: center;
9 background: #f6ead8;
10}
02
実行結果
ブラウザでの表示
03
解説
grid-template-columns に幅を並べると、その数だけ列ができます。200px 1fr なら「200pxの列」と「残り全部の列」の2列です。
fr は余った領域を分け合う単位です。repeat(3, 1fr) は 1fr 1fr 1fr と同じ意味で、3等分の列になります。
アイテムは左上から順に自動で配置され、列があふれると次の行に折り返します。
04
応用例・注意点
指定できる値
| 値 | 説明 |
|---|---|
200px 1fr | 固定幅の列と、残りを埋める列 |
repeat(3, 1fr) | 同じ幅の列を3つ |
minmax(160px, 1fr) | 最小160px、最大1frの範囲で伸縮 |
repeat(auto-fill, minmax(160px, 1fr)) | 入るだけ列を作り、自動で折り返す |
カードを自動で折り返す
メディアクエリを使わずに、画面幅に応じて列数が変わるレイアウトをつくれます。
CSS
1.cards {
2 display: grid;
3 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
4 gap: 24px;
5}
注意点
- 01列数を固定するとスマートフォンで窮屈になります。auto-fill や @media と組み合わせましょう。
- 02gap は列の幅に含まれず、列と列の間に追加されます。