grid-template-columns ＋ repeat で可変するレイアウトを作成しよう！

ニャンコ

画面のサイズに応じてカードの枚数を変更したいよ～

そういう時はgridレイアウトを使用すればいいよ

ワンコ

CSS Gridで「カードをきれいに並べたい」「列数を自動で変えたい」と思ったことはありませんか？

そんなときに使うのが、grid-template-columnsです。

grid-template-columnsを使うと、カードを3列で並べたり、サイドバー付きの2カラムレイアウトを作ったり、画面幅に合わせて列数が変わるレスポンシブなレイアウトを作れます。

この記事では、grid-template-columnsの基本的な使い方から、repeat()・fr・minmax()を使ったレスポンシブ対応、コピペで使える実用レシピまで初心者向けに解説します。

この記事でわかること

grid-template-columnsとは何か
列数や列幅を指定する基本の書き方
px・%・fr・auto・minmax()の違い
repeat()を使ってコードを短く書く方法
カードを自動で折り返すレスポンシブレイアウトの作り方
auto-fitとauto-fillの違い
grid-template-columnsが効かないときの原因

grid-template-columnsとは？

grid-template-columnsは、CSS Gridで「列の作り方」を決めるプロパティです。

もう少し具体的にいうと、グリッドレイアウトの列数や列幅を指定するために使います。

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

上のコードでは、同じ幅の列を3つ作っています。

例えば、カード一覧・商品一覧・ブログ記事一覧・サイドバー付きのレイアウトなど、横並びのレイアウトを作るときによく使います。

grid-template-columnsの基本構文

基本の書き方は次のとおりです。

.親要素 {
  display: grid;
  grid-template-columns: 列幅 列幅 列幅;
}

<div class="grid">
  <div class="grid__item">1fr</div>
  <div class="grid__item">1fr</div>
  <div class="grid__item">1fr</div>
</div>

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

.grid__item {
  padding: 40px 20px;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  border-radius: 8px;
}

.grid__item:nth-child(1) {
  background-color: #4f8cff;
}

.grid__item:nth-child(2) {
  background-color: #22c55e;
}

.grid__item:nth-child(3) {
  background-color: #f97316;
}

See the Pen Untitled by kokusyo (@kokusyo) on CodePen.

grid-template-columnsでよく使う値

grid-template-columnsには、px・%・fr・auto・minmax()・repeat()などを指定できます。

まずは、実務でよく使う値を順番に見ていきましょう。

px：固定幅で指定する

pxを使うと、列幅を固定できます。

grid-template-columns: 200px 200px 200px;

このコードでは、200pxの列を3つ作っています。
列幅を固定できるのでわかりやすいですが、画面幅が狭いと横にはみ出すことがあります。
そのため、レスポンシブ対応が必要なレイアウトでは注意が必要です。

%：親要素に対する割合で指定する

%を使うと、親要素の幅に対する割合で列幅を指定できます。

grid-template-columns: 30% 70%;

このコードでは、左を30%、右を70%の2カラムにしています。
親要素の幅に応じて列幅が変わるため、固定幅よりは柔軟に使えます。
ただし、gapを指定している場合は、合計幅が想定より大きくなることがあるので注意しましょう。

fr：余った幅を比率で分ける

CSS Gridで特によく使うのが、frです。
frは、余った幅を比率で分けるための単位です。

grid-template-columns: 2fr 1fr;

上のコードでは、左が2、右が1の割合になります。
つまり、左側が右側の約2倍の幅になります。

frは、gapを除いた残りの幅を分配します。
そのため、余白込みで自然にレイアウトを組みやすいのが特徴です。

auto：中身に合わせて幅を決める

autoを使うと、中身に合わせて列幅を決められます。

grid-template-columns: auto 1fr;

上のコードでは、左側は中身の幅に合わせて、右側は残りの幅を使います。

アイコン＋テキスト、ラベル＋本文のようなレイアウトで使いやすい指定です。

grid-template-columnsでautoと1frを指定した2カラムレイアウトの例

minmax()：最小幅と最大幅を指定する

minmax()は、列の最小幅と最大幅を指定する関数です。

grid-template-columns: minmax(200px, 1fr) 320px;

上のコードでは、1列目は最低200pxを確保しつつ、余った幅があれば広がります。
2列目は320pxで固定しています。

カードが小さくなりすぎて崩れるのを防ぎたいときに便利です。

See the Pen Untitled by kokusyo (@kokusyo) on CodePen.

repeat()：同じ指定を繰り返す

repeat()は、同じ列指定を繰り返すための関数です。

grid-template-columns: repeat(3, 1fr);

これは、次のコードと同じ意味です。

grid-template-columns: 1fr 1fr 1fr;

同じ幅の列を複数作りたいときは、repeat()を使うとコードを短く書けます。

repeat(繰り返しの回数, 繰り返す値)

See the Pen Untitled by kokusyo (@kokusyo) on CodePen.

レスポンシブ可変グリッドの作り方（repeat × minmax）

カードなどのレイアウトを横並びにする場合「display:flex」を使用する場合が多いと思います。
たしかに、要素を横並びにするならflexが手っ取り早いです。

ですが、「flexでも横並びはできるけど、画面幅が狭くなるとカードが潰れて崩れがち」な場面で、Gridが強いです。

「flex」と「grid」それぞれで並べたサンプルを用意しました。
検証ツールなどで画面幅を狭めて動きをご確認ください。
https://sample.web-create-kokusyo.com/sample02/

画面幅を狭めると、「flex」の場合はどんどん潰れてしまいますが、「grid」の方は、画面幅に応じて表示するカードの枚数が自動的に切り替わっています。

さっそくサンプルのソースをご覧ください。
今回はgridレイアウトについての解説なので、grid関連のプロパティ以外は省略しています。

/* gridのスタイル */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px 2%;
}

ポイントはこちらの部分となります。

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

この指定を使うと、カードの最小幅を250pxに保ちながら、画面幅に応じて列数を自動調整できます。

・250px：カードが潰れない最小幅
・1fr：余った幅を分け合って広がる指定
・auto-fit：入るだけ列を作り、余った列は畳む
・repeat()：同じ指定を繰り返して書くための関数

PCでは3〜4列、タブレットでは2列、スマホでは1列のように、画面幅に合わせて自然に折り返したいときに便利です。

minmax(250px, 1fr)

minmax関数は値の最小値と最大値を設定します。
「最小幅＝デザインが崩れないギリギリ」を決めるのがコツです。

最小 250px（カードが潰れない下限＝ストッパー）
最大 1fr（余った幅を伸びて埋める＝伸びしろ）

minmax(最小値, 最大値);

fr単位はGridから新しく追加された単位で、「fr」はfractionの略で比率という意味になります。
親要素から見た子要素の比率を指定できます。

auto-fitとauto-fillの違い

repeat()で可変レイアウトを作るときに、auto-fitとauto-fillという指定が出てきます。

auto-fit

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

auto-fill

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

どちらも「入るだけ列を作る」という点は似ています。

違いをざっくりいうと、次のようになります。

auto-fit：空いた列を畳んで、残った列が広がる
auto-fill：空いた列を残したまま、列の枠を維持する

通常のカード一覧では、auto-fitを使う場面が多いです。

例えば、カードが2枚しかないときに、空いたスペースを埋めるようにカードを広げたいならauto-fitが向いています。
一方で、空の列も含めてグリッドの枠を維持したい場合はauto-fillを使います。

grid-template-columnsでauto-fitとauto-fillの違いを比較した図解 — grid-template-columnsのautoについて

grid-template-columnsの実用レシピ

ここからは、実際のサイト制作で使いやすいgrid-template-columnsのレイアウト例を紹介します。

基本の書き方を理解したうえで、すぐに使えるコード例として参考にしてください。

カードを3列で並べる

<div class="card-list">
  <article class="card">カード1</article>
  <article class="card">カード2</article>
  <article class="card">カード3</article>
</div>

.card-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

repeat(3, 1fr)と書くと、同じ幅の列を3つ作れます。
カード一覧や商品一覧など、PC表示で3列にしたいときによく使います。

PCは3列、スマホは1列にする

.card-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media only screen and (max-width: 799px) {
  .card-list {
    grid-template-columns: 1fr;
  }
}

PCでは3列、スマホでは1列にしたい場合は、メディアクエリでgrid-template-columnsを上書きします。

カードを自動で折り返す

.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

repeat(auto-fit, minmax(250px, 1fr))を使うと、画面幅に応じて列数を自動で調整できます。

メディアクエリを書かなくても、親要素の幅に合わせて1列・2列・3列と自然に変わるのがメリットです。
商品一覧やブログカードのように、カードの数が増減するレイアウトでは、auto-fitとminmax()の組み合わせが便利です。

minmax(250px, 1fr)の250pxは、カードが崩れない最小幅として考えます。
デザインに合わせて、調整しましょう。

サイドバー付きの2カラムレイアウト

<div class="layout">
  <main class="main">本文エリア</main>
  <aside class="side">サイドバー</aside>
</div>

.layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
}

@media only screen and (max-width: 799px) {
  .layout {
    grid-template-columns: 1fr;
  }
}

ブログ記事ページや下層ページのレイアウトで使いやすい指定です。

grid-template-columnsが効かないときの原因

grid-template-columnsを書いてもレイアウトが変わらない場合は、次の点を確認してみてください。

親要素にdisplay: grid;を指定していない

grid-template-columnsは、Gridコンテナに指定するプロパティです。

そのため、親要素にdisplay: grid;が指定されていないと反映されません。

子要素のmin-widthが強くて縮まない

minmax()を指定しているのにレイアウトが崩れる場合、子要素のmin-widthや画像の幅が原因になっていることがあります。

.card {
  min-width: 0;
}

Gridの子要素が中身の幅に引っ張られて縮まない場合は、子要素にmin-width: 0;を指定すると改善することがあります。

画像の高さがバラバラで崩れて見える

カード内の画像サイズがバラバラだと、グリッド自体は正しく並んでいても、見た目が崩れて見えることがあります。

.card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

画像の比率をそろえたい場合は、aspect-ratioやobject-fitを併用すると整えやすいです。

gapとmarginを混在させている

.card-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

子要素にmarginを付けると、外周だけ余白が広くなったり、想定より幅が足りなくなったりすることがあります。

外側の余白は親要素のpadding、カード同士の余白はgapで管理すると崩れにくいです。

まとめ

grid-template-columnsは、CSS Gridで列の数や幅を指定するためのプロパティです。

まずは、次の書き方を覚えておくと実務で使いやすいです。

.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

この指定を使うと、カードの最小幅を保ちながら、画面幅に応じて列数を自動で調整できます。

固定の3列にしたい場合はrepeat(3, 1fr)、左右の比率を変えたい場合は2fr 1fr、カードを自動で折り返したい場合はrepeat(auto-fit, minmax(250px, 1fr))を使うと便利です。

最初は難しく感じるかもしれませんが、よく使うパターンはある程度決まっています。
この記事のコードをコピペしながら、デザインに合わせて数値を調整してみてください。

grid-template-columnsの使い方｜repeat・fr・minmaxでレスポンシブな列を作る方法

grid-template-columnsとは？

grid-template-columnsの基本構文

grid-template-columnsでよく使う値

px：固定幅で指定する

%：親要素に対する割合で指定する

fr：余った幅を比率で分ける

auto：中身に合わせて幅を決める

minmax()：最小幅と最大幅を指定する

repeat()：同じ指定を繰り返す

レスポンシブ可変グリッドの作り方（repeat × minmax）

minmax(250px, 1fr)

auto-fitとauto-fillの違い

auto-fit

auto-fill

grid-template-columnsの実用レシピ

カードを3列で並べる

PCは3列、スマホは1列にする

カードを自動で折り返す

サイドバー付きの2カラムレイアウト

grid-template-columnsが効かないときの原因

親要素にdisplay: grid;を指定していない

子要素のmin-widthが強くて縮まない

画像の高さがバラバラで崩れて見える

gapとmarginを混在させている

まとめ

Web制作の独学が不安な人へ。ZeroPlus Gateを実際に受講してみました

体験レビューを読む（無料の理由・注意点も）