minmax()は、CSS Gridで「最小幅は守りたいけど、余ったら伸びてほしい」というレイアウトを作るための関数です。カード一覧、ギャラリー、サイドバー、記事一覧など、レスポンシブなUIでかなり使えます。
この記事では、minmax()の基本構文から、auto-fitやauto-fillとの組み合わせ、よくある失敗までまとめます。
minmax()とは
minmax(最小値, 最大値)は、Gridトラックのサイズに下限と上限を指定する関数です。たとえばminmax(240px, 1fr)なら、「最低240px、余ったら1frで伸びる」という意味になります。
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
なぜ 1fr だけでは足りないのか
repeat(3, 1fr)のように書くと、常に3列を保とうとします。PCではきれいでも、スマホでは1列あたりの幅が狭くなりすぎて、カードの中身が崩れることがあります。
<section class="cards" aria-label="記事一覧">
<article class="card">
<p class="card__label">CSS</p>
<h2>Flexboxで要素が縮まない原因5選</h2>
<p>min-widthや固定幅が原因で起きるレイアウト崩れを解説します。</p>
</article>
<article class="card">
<p class="card__label">CSS GRID</p>
<h2>CSS Gridのminmax()完全ガイド</h2>
<p>カード一覧やギャラリーを自然にレスポンシブ化します。</p>
</article>
<article class="card">
<p class="card__label">UI</p>
<h2>疑似要素::before・::afterが表示されない原因7選</h2>
<p>content、display、position、z-indexを順番に確認します。</p>
</article>
</section>.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}minmax()を使うと、カードが最低幅を下回りそうなタイミングで自然に列数が減ります。
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: clamp(16px, 2vw, 28px);
}
.card {
min-width: 0;
padding: 20px;
border: 2px solid #111;
border-radius: 14px;
background: #fff;
}
.card__label {
width: fit-content;
margin: 0 0 12px;
padding: 4px 10px;
border-radius: 999px;
background: #ffd329;
color: #111;
font-size: 12px;
font-weight: 900;
}
.card h2 {
margin: 0 0 10px;
font-size: clamp(20px, 4vw, 28px);
line-height: 1.25;
}
.card p {
margin: 0;
}auto-fit と auto-fill の違い
auto-fitは空の列を潰して、実際のアイテムを広げます。auto-fillは空の列も残すため、グリッドの枠を維持したいときに向いています。通常のカード一覧なら、まずはauto-fitでOKです。
auto-fit：少ない件数でもカードを横に広げたいauto-fill：空の列を含めてグリッドのリズムを保ちたい- 迷ったらカード一覧は
auto-fit、ギャラリーは用途に応じて選ぶ
実践パターン
よく使うパターンをまとめると以下です。記事一覧、制作実績、画像ギャラリー、2カラムレイアウトに使い回せます。
/* 1. カード一覧の定番 */
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 24px;
}
/* 2. 狭い画面で確実に1列にする */
.articles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
gap: 24px;
}
/* 3. サイドバー付きレイアウト */
.page {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
gap: 32px;
}
/* 4. 画像ギャラリー */
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px;
}よくある失敗1：minmax(300px, 1fr) がスマホではみ出す
画面幅が300pxより狭い場合、minmax(300px, 1fr)は最低300pxを守ろうとして横にはみ出します。安全にするならmin(100%, 300px)を組み合わせます。
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
よくある失敗2：中身の最小幅で崩れる
Gridアイテム内に長いURL、コード、画像があると、トラック幅より中身が強くなって崩れることがあります。Flexboxと同じく、必要な場所にmin-width: 0やoverflow-wrapを入れます。
.card {
min-width: 0;
overflow-wrap: anywhere;
}
CodePen
CodePenでは、上のindex.htmlをHTMLパネルへ、responsive-grid.cssをCSSパネルへ貼り付けてください。カード数を3件、6件、9件に変えながら、auto-fitとauto-fillの違いを確認すると理解しやすくなります。
まとめ
minmax()は、CSS Gridをレスポンシブにするための基本装備です。カード一覧ではrepeat(auto-fit, minmax(min(100%, 240px), 1fr))を覚えておくと、多くのレイアウトに応用できます。
