カードを並べるCSS｜グリッドで自動で折り返す、auto-fillとauto-fitの違いとコピペで使える4種類

ブログの一覧、制作実績、スタッフ紹介。カードを横に並べて、入りきらない分は次の行へ。パソコンでは4列、スマホでは2列。こうした並べ方は、CSSのグリッドを使うと1行で書けます。画面の幅ごとに「ここから3列、ここから2列」と指定を書き分ける必要はありません。

使いどころ

同じ種類のカードが、数が決まらずに増えていく場所（ブログ・お知らせ・実績の一覧）に使う。料金プランのように「3つを横に並べて比べてほしい」場所は、列の数を決めて並べる。

今回は、基本のカード一覧、数が少ないときに広げる並べ方、ボタンの位置がそろうカード、狭い画面でもはみ出さない並べ方の4種類を、コピペ用のコードつきで紹介します。

連載「WEBの技術」の15回目です。
今回は「カードの並べ方」。auto-fill と auto-fit、名前が似ていて違いが分かりにくい2つも、並べて見比べます。

完成見本：箱の幅に合わせて、列の数が変わる

点線の箱の幅を、アニメーションで広くしたり狭くしたりしています。箱が狭くなると、カードが次の行へ折り返し、列の数が3列→2列→1列と変わります。CSSはどこも書き分けていません。

AUTO-FILL1. 基本のカード一覧ブログ・お知らせの一覧

※ 見本は見た目を見せるためのもので、読み上げソフトでは読まれないようにしています。スマホでは縮小して表示しています。端末の「動きを減らす」設定がオンのときは、箱の幅は動きません。

コピペ用のコード

4種類とも、最初にカード1枚の見た目（共通のCSS）を入れ、そのうえで並べ方のCSSを足します。共通のCSSは、各見本のコードの先頭にも入れてあります。CSSは、サイトのCSSファイルや、WordPressならテーマの「追加CSS」などに入れます。クラス名の頭の kd-grd は、サイトのほかのデザインと名前がぶつからないようにするための目印です。

カードの中の kd-grd-thumb は、写真の代わりに置いた色の箱です。実際に使うときは、ここを画像（<img>）に差し替えます。

1. 基本のカード一覧

いちばんよく使う形です。カード1枚の幅を「160px以上」と決めておくと、箱に入るだけの列を自動で作り、入りきらない分を次の行へ折り返します。パソコンでは4列、スマホでは2列のように、画面ごとの指定を書かなくても列の数が変わります。

HTML

<div class="kd-grd-fill">
  <div class="kd-grd-card">
    <div class="kd-grd-thumb"></div>
    <p class="kd-grd-title">お知らせのタイトル</p>
  </div>
  <div class="kd-grd-card">
    <div class="kd-grd-thumb"></div>
    <p class="kd-grd-title">ブログ記事のタイトル</p>
  </div>
  <!-- 同じカードをくり返す -->
</div>

CSS

/* 4種類に共通：カード1枚の見た目 */
.kd-grd-card {
  background: #FFFFFF;
  border: 1px solid #D8E6F0;
  border-radius: 12px;
  overflow: hidden;
}
.kd-grd-thumb {
  aspect-ratio: 3 / 2;
  background: #BAE6FD;
}
.kd-grd-title {
  margin: 0;
  padding: 10px 12px 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: #10283A;
}
.kd-grd-fill {
  display: grid;
  /* 160px以上の列を、入るだけ作る */
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  /* カードとカードのすき間 */
  gap: 16px;
}

2. 数が少ないときは広げる

1の auto-fill を auto-fit に変えただけです。カードの数が少なく、箱に空きがあるとき、空いた列をなくしてカードを広げます。2〜3件だけ並べる場所で、右側がぽっかり空くのを防げます。

HTML

<div class="kd-grd-fit">
  <div class="kd-grd-card">
    <div class="kd-grd-thumb"></div>
    <p class="kd-grd-title">お知らせのタイトル</p>
  </div>
  <div class="kd-grd-card">
    <div class="kd-grd-thumb"></div>
    <p class="kd-grd-title">ブログ記事のタイトル</p>
  </div>
</div>

CSS

/* 4種類に共通：カード1枚の見た目 */
.kd-grd-card {
  background: #FFFFFF;
  border: 1px solid #D8E6F0;
  border-radius: 12px;
  overflow: hidden;
}
.kd-grd-thumb {
  aspect-ratio: 3 / 2;
  background: #BAE6FD;
}
.kd-grd-title {
  margin: 0;
  padding: 10px 12px 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: #10283A;
}
.kd-grd-fit {
  display: grid;
  /* 空いた列はなくして、カードを広げる */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}

3. ボタンの位置がそろうカード

グリッドで並べたカードは、同じ行のカードが自動で同じ高さになります。そのうえで、カードの中を縦に並べ、ボタンを一番下に寄せると、説明の長さがちがってもボタンの位置が横一列にそろいます。

HTML

<div class="kd-grd-btn">
  <div class="kd-grd-card">
    <div class="kd-grd-thumb"></div>
    <p class="kd-grd-title">お知らせのタイトル</p>
    <p class="kd-grd-text">短い説明</p>
    <a class="kd-grd-more" href="リンク先のURL">詳しく見る</a>
  </div>
  <div class="kd-grd-card">
    <div class="kd-grd-thumb"></div>
    <p class="kd-grd-title">ブログ記事のタイトル</p>
    <p class="kd-grd-text">説明が少し長いカード。2行になっても、下のボタンの位置はそろいます。</p>
    <a class="kd-grd-more" href="リンク先のURL">詳しく見る</a>
  </div>
  <div class="kd-grd-card">
    <div class="kd-grd-thumb"></div>
    <p class="kd-grd-title">制作実績のタイトル</p>
    <p class="kd-grd-text">説明の長さがちがうカード</p>
    <a class="kd-grd-more" href="リンク先のURL">詳しく見る</a>
  </div>
</div>

CSS

/* 4種類に共通：カード1枚の見た目 */
.kd-grd-card {
  background: #FFFFFF;
  border: 1px solid #D8E6F0;
  border-radius: 12px;
  overflow: hidden;
}
.kd-grd-thumb {
  aspect-ratio: 3 / 2;
  background: #BAE6FD;
}
.kd-grd-title {
  margin: 0;
  padding: 10px 12px 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: #10283A;
}
.kd-grd-btn {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
/* カードの中を、上から下へ縦に並べる */
.kd-grd-btn .kd-grd-card {
  display: flex;
  flex-direction: column;
}
.kd-grd-text {
  margin: 0;
  padding: 0 12px 12px;
  font-size: 13px;
  line-height: 1.6;
  color: #33495B;
}
/* 残りの高さをボタンの上に入れて、一番下へ寄せる */
.kd-grd-more {
  margin: auto 12px 12px;
  padding: 8px;
  border-radius: 8px;
  background: #0369A1;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

4. 狭い画面でもはみ出さない

カードを大きめ（260px以上）にすると、スマホの狭い画面や、サイドバーの中では、260pxの列すら入らないことがあります。min()（ミン：2つのうち小さいほうを使う指定）で「260pxか、箱の幅か、小さいほう」にしておくと、狭いところでは1列に縮み、横にはみ出しません。

HTML

<div class="kd-grd-safe">
  <div class="kd-grd-card">
    <div class="kd-grd-thumb"></div>
    <p class="kd-grd-title">お知らせのタイトル</p>
  </div>
  <div class="kd-grd-card">
    <div class="kd-grd-thumb"></div>
    <p class="kd-grd-title">ブログ記事のタイトル</p>
  </div>
  <div class="kd-grd-card">
    <div class="kd-grd-thumb"></div>
    <p class="kd-grd-title">制作実績のタイトル</p>
  </div>
</div>

CSS

/* 4種類に共通：カード1枚の見た目 */
.kd-grd-card {
  background: #FFFFFF;
  border: 1px solid #D8E6F0;
  border-radius: 12px;
  overflow: hidden;
}
.kd-grd-thumb {
  aspect-ratio: 3 / 2;
  background: #BAE6FD;
}
.kd-grd-title {
  margin: 0;
  padding: 10px 12px 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: #10283A;
}
.kd-grd-safe {
  display: grid;
  /* 260pxか箱の幅(100%)の、小さいほうを最小の幅にする */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 16px;
}

仕組み：1行の中で起きていること

カードを並べているのは、次の1行です。

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

display: grid は「中身をマス目に並べる」指定で、grid-template-columns は「何列に、どの幅で並べるか」を決める指定です。この1行を、内側から順に読んでいきます。

1. minmax(160px, 1fr)：1列の幅は「160px以上」

minmax()（ミンマックス）は、幅に「最小〜最大」の範囲をつける書き方です。最小は160px。最大の 1fr は「残りの幅を分け合った1つ分」という単位で、余った幅を列どうしで等しく分けます。つまり「どの列も160px以上で、余りはみんなで均等に分ける」という意味になります。

2. repeat(auto-fill, …)：入るだけ列を作る

repeat() は同じ列をくり返す書き方です。repeat(3, 1fr) なら「同じ幅の列を3つ」。くり返す回数に数字ではなく auto-fill を書くと、「箱からはみ出さない範囲で、入るだけ」になります。箱が640pxなら、160pxの列とすき間16pxで3列。箱が狭くなって3列が入らなくなると2列になり、入りきらないカードは次の行へ回ります。

3. auto-fill と auto-fit の違い

MDNの説明では、auto-fit は「auto-fill と同じ動きをしたうえで、カードが入っていない空の列をなくす」ものです。カードがたくさんあって全部の列が埋まっているときは、2つは同じ見た目になります。違いが出るのは、カードの数が少なく、箱に空きがあるときだけです。

auto-fill：空いた列が残る

auto-fit：カードが広がる

上はどちらもカード2枚、最小の幅は90pxです。auto-fill は空の列を場所として残すので、カードは左に寄り、右側が空きます。auto-fit は空の列をなくし、2枚で箱の幅を分け合います。一覧のように数が増えていく場所は auto-fill、2〜3件だけ見せる場所は auto-fit、と覚えておくと迷いません。

書き方	カードが多いとき	カードが少ないとき
auto-fill	入るだけ列を作って並べる	空いた列が残り、カードは最小に近い幅のまま
auto-fit	auto-fill と同じ	空いた列をなくし、カードが広がる

4. 同じ行のカードは、同じ高さになる

グリッドに並べたものは、何も指定しなければ、同じ行の中でいちばん背の高いものに高さがそろいます。3の見本は、これを使っています。カードの中を display: flex と flex-direction: column で縦に並べ、ボタンに margin-top: auto（上の余白を「残り全部」にする指定）を付けると、ボタンがカードの一番下に押し下げられ、横一列にそろいます。

MDNでは、ここで使った grid-template-columns と minmax() は、主要なブラウザで2017年10月からそろって使える「Baseline」の広く使える段階と表示されています。4の見本の min() も、2020年7月から同じ段階です。

数値を変えるとどうなるか

カードの最小の幅（1の見本）

minmax() の最小の数字だけを変えて、同じ6枚を並べました。

最小 120px：列が多い

見本 160px

最小 240px：列が少ない

最小を小さくすると列が増え、1枚ずつが小さくなります。120pxだと、パソコンでは5列になり、写真もタイトルも小さく詰まった印象です。240pxにすると列が減り、1枚ずつが大きく見えます。タイトルが長い記事の一覧や、写真をしっかり見せたい実績は大きめ、短い言葉だけのカードは小さめ、と中身で決めます。

変えるところ	小さくすると	大きくすると
最小の幅（minmax の 160px）	列が増え、1枚が小さくなる	列が減り、1枚が大きくなる
すき間（gap の 16px）	詰まって、ひとかたまりに見える	1枚ずつ独立して見える
最大の幅（minmax の 1fr）	160px などに固定すると、カードが広がらず右が空く	1fr のままなら、余りを均等に分ける

スマホと、見る人への配慮

狭い画面で、横にはみ出していないか

最小の幅を大きくすると、スマホやサイドバーの中で、その幅の列が1つも入らないことがあります。グリッドは最小の幅を守るので、カードが箱の外へはみ出し、ページが横にずれて動くようになります。

min() なし：はみ出す

min() あり：箱に収まる

上は、幅200pxの点線の箱に、最小260pxのカードを並べたものです。min(100%, 260px) にすると、箱が260pxより狭いときは箱の幅（100%）が最小の幅になり、はみ出しません。最小の幅を200px以上にするときは、この書き方にしておくと安心です。

並びの順番と、読み上げの順番

グリッドは見た目の並び替えもできますが、読み上げソフトやキーボードの Tab キーは、HTMLに書いた順番どおりに進みます。MDNのグリッドと配慮の解説でも、見た目の順番とHTMLの順番を食いちがわせないよう注意されています。新しい記事を先頭に見せたいなら、CSSで並び替えるのではなく、HTMLの順番そのものを新しい順にします。

カード全体をリンクにするときの文字

3の見本のボタンは「詳しく見る」ですが、読み上げソフトでリンクだけを一覧にすると、「詳しく見る」が並んでどれがどれか分からなくなります。カードのタイトル自体をリンクにするか、ボタンの文字を「料金を詳しく見る」のように中身が分かる言葉にします。ボタンの色は、白い文字が読みやすいよう、KAKERUブルーより濃い #0369A1 にしています。

やりすぎ注意

カードに影・枠線・色の帯・アイコンを全部のせると、並べたときにうるさくなります。グリッドで並べる場所は「同じものが並んでいる」と分かることが大事なので、カード1枚の飾りは少なめにして、写真とタイトルで違いを見せます。

カードの並べ方で大事なのは、列の数より「1枚の最小の幅」だと考えています。
タイトルが2行で収まる幅、写真が小さくなりすぎない幅。そこから決めると、列の数はあとからついてきます。

AIに頼むなら

このカードの並べ方は、Claudeなどの生成AIに頼んでもすぐ作ってもらえます。そのときは、何を並べるか・1枚の最小の幅・数が少ないときどうするか・狭い画面での扱いまで、まとめて伝えると、手直しが少なく済みます。

ブログの一覧を、カードで並べるCSSを作って。画面ごとの指定（メディアクエリ）は使わず、
grid の repeat(auto-fill, minmax()) で、1枚は最小220px、すき間は16px。
スマホの狭い画面でもはみ出さないよう min(100%, 220px) にして、HTMLは新しい記事から順に書く前提で。

AIが出したコードは、そのまま使う前に、次の3つを確かめます。

320pxくらいの狭い幅で、横にはみ出さないか。パソコンの画面だけで見ると気づけません。ブラウザの幅を一番狭くして、ページが横に動かないかを見ます
auto-fill と auto-fit が、場所に合っているか。AIはどちらかを決まって使いがちです。カードが2〜3枚しかないときに右が空いていないか、逆に1枚だけのときに横いっぱいに広がりすぎていないかを確かめます
CSSで並び順を入れ替えていないか。order などで見た目の順番だけ変えていると、キーボードや読み上げの順番とずれます

KAKERUならこう使う／使わない

最後に、作り手としての判断です。

使う場面

ブログ・お知らせ・制作実績の一覧。数が増えていき、何枚になるか決まらない場所です。KAKERUで一番よく使うのは、1の auto-fill です
スタッフ紹介やサービスの入口。3〜4件だけのときは auto-fit にして、右側が空かないようにします
説明の長さがそろわないカード。3の見本のように、ボタンを一番下にそろえると、一覧がきちんと見えます

使わない場面

料金プランの比較。3つのプランを横に並べて見比べてほしい場所で、2列＋1列に折り返すと、比べにくくなります。パソコンでは3列と決め、スマホでは縦に並べる、と列の数をはっきり決めます
順番に意味がある手順。「1→2→3」と読んでほしい流れは、折り返すと次がどれか分かりにくくなります。縦に並べるほうが伝わります
2つを左右に並べるだけの場所。写真と文章を左右に並べる、のような形は、グリッドで自動に折り返すより、並べ方を決めて書くほうが意図どおりになります

「自動で折り返すから楽」ではなく、「何枚になるか分からないから自動に任せる」。
数が決まっている場所は、列の数も自分で決めます。

まとめ

カードの一覧は display: grid と grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) の組み合わせ
minmax() は「1列の最小〜最大」。1fr は余った幅を均等に分ける単位
auto-fill は空いた列を残し、auto-fit は空いた列をなくしてカードを広げる。違いが出るのはカードが少ないときだけ
同じ行のカードは同じ高さになる。ボタンは margin-top: auto で一番下にそろえる
最小の幅を大きくするなら min(100%, 260px) で、狭い画面でもはみ出さないようにする
並び順はHTMLの順番で決める。料金の比較や手順など、列の数に意味がある場所には使わない

まずは1の「基本のカード一覧」のコードをコピーして、ブラウザの幅を広げたり狭めたりしてみてください。列の数が、指定を書き分けなくても変わるのが分かります。

参考にした資料

いずれも2026年10月20日に確認しました。ブラウザの対応状況は変わることがあります。最新の情報は各ページでご確認ください。

MDN「grid-template-columns」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-template-columns
※列の数と幅を決める指定。2017年10月から主要なブラウザでそろって使えること
MDN「repeat()」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/repeat
※auto-fill は入るだけの列を作り、auto-fit はそのうえで空いた列をなくすこと
MDN「minmax()」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/minmax
※列の幅に「最小〜最大」の範囲を決める書き方
MDN「min()」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/min
※いくつかの値のうち小さいほうを使う指定。2020年7月から主要なブラウザでそろって使えること
MDN「gap」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/gap
※並べたものどうしのすき間の指定
MDN「Grid layout and accessibility」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout/Accessibility
※見た目の並びとHTMLの順番を食いちがわせない、という注意