CSSグリッド完全入門！minmax関数で柔軟なカラム幅を設定する方法を初心者向けに徹底解説

minmax()関数で柔軟なカラム幅を設定するテクニック

先生と生徒の会話形式で理解しよう

生徒

「CSSグリッドでminmaxって書いてあるのを見たんですが、何をしているんですか？」

先生

「画面の広さに合わせて、列の幅を自動で調整するための仕組みです」

生徒

「パソコンも触ったことがないので、想像ができません…」

先生

「大丈夫です。ゴムでできた箱を並べるイメージで説明しますね」

1. CSSグリッドとカラム幅の基本

CSSグリッドレイアウトは、画面を表のように区切って要素を並べるレイアウト方法です。このとき縦の列のことをカラムと呼びます。カラム幅を決めることで、文字や画像をきれいに整列させることができます。

しかし画面の大きさは、人によってまったく違います。小さなスマートフォンから大きなパソコンまで対応するには、固定された幅ではなく、柔軟に変わる幅が必要になります。

2. minmax関数とは何か

minmax関数は、カラムの最小サイズと最大サイズを同時に指定できる仕組みです。名前の通り、最小と最大を決めるという意味があります。

難しく考えず、「最低でもこの大きさ、余裕があればここまで広がっていい」というルールを作るものだと覚えてください。ゴムのように伸び縮みする箱を想像すると理解しやすくなります。

3. minmaxを使った一番シンプルな例

まずは最も基本的な使い方です。列の幅が狭くなりすぎないようにしつつ、画面が広いときは余白を活かします。


<style>
.container {
    display: grid;
    grid-template-columns: minmax(150px, 1fr);
}
.box {
    background: lightblue;
    padding: 20px;
}
</style>

<div class="container">
    <div class="box">内容</div>
</div>

ブラウザ表示

4. repeatと組み合わせた実用的な使い方

minmaxは、repeatと組み合わせることで本領を発揮します。同じ幅のカラムを自動で複数作り、画面サイズに応じて並び替えができます。

商品一覧や画像一覧など、数が増減するレイアウトで特に便利です。


<style>
.grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 10px;
}
.item {
    background: lightgreen;
    padding: 15px;
}
</style>

<div class="grid">
    <div class="item">商品1</div>
    <div class="item">商品2</div>
    <div class="item">商品3</div>
</div>

ブラウザ表示

5. レスポンシブデザインとの関係

レスポンシブデザインとは、画面サイズに応じて見た目を調整する考え方です。 minmaxを使うことで、細かい設定をしなくても自然に対応できます。

画面が狭いときは縦に並び、広いときは横に広がるため、初心者でも扱いやすいのが特徴です。


<style>
.responsive {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}
.card {
    background: pink;
    padding: 20px;
}
</style>

<div class="responsive">
    <div class="card">カードA</div>
    <div class="card">カードB</div>
    <div class="card">カードC</div>
</div>

ブラウザ表示