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>

ブラウザ表示