【CSS】メディアクエリ不要！Gridの「auto-fit」で作る最強のレスポンシブカード配列

ブログの記事一覧や、サービスの「特徴3選」などをカード型で並べるレイアウトは、Webデザインの定番です。

これまでは「Flexbox」を使い、スマホなら1列（100%）、タブレットなら2列（50%）、PCなら3列（33.3%）になるように、画面幅ごとに@media（メディアクエリ）を何度も書き直すのが当たり前でした。

しかし、現在はCSS Grid（グリッド）の強力な関数を組み合わせることで、メディアクエリを一切書かずに「画面幅に合わせて自動でカラム数が変わり、余ったスペースを綺麗に埋めてくれる最強のレスポンシブレイアウト」を作ることができます。

この記事では、実務のコーディングスピードを劇的に上げるGridの「魔法の1行」とその仕組みを、初心者向けに分かりやすく深掘りして解説します。

結論：メディアクエリを葬り去る魔法の1行

まずは実際のコードを見てみましょう。カードを囲む親要素（コンテナ）に、以下のCSSを指定するだけです。

.kz-grid-cards {
    display: grid;
    gap: 20px; /* カード同士の余白 */
    /* ▼ これが最強のレスポンシブを実現する1行 */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

たったこれだけで、画面幅が広いときは3列や4列になり、スマホのように画面が狭くなると自動的に1列に折り返されます。もう@media (max-width: 768px) { ... }といった記述は不要です。

なぜ自動で折り返すの？仕組みを徹底解剖

「コピペで動いた！便利！」で終わらせず、実務で応用できるようにこの1行の意味を分解して理解しておきましょう。ここには3つの重要なCSS機能が組み合わさっています。

つまり、あの1行はブラウザに対して「カードの幅は最低280pxね！あとは画面幅に合わせて、入るだけ横に並べて！余った隙間は均等に伸ばして埋めておいて！」と指示を出しているわけです。

実際の動作デモ（画面幅を変えてみてください）

以下のカードは、実際に今回のコードで実装しています。パソコンで見ている方は、ブラウザのウィンドウ幅をゆっくり狭めたり広げたりしてみてください。

Flexboxとの使い分けは？

「今まで通りFlexbox（display: flex;とflex-wrap: wrap;）でもいいのでは？」と思うかもしれません。

もちろんFlexboxも優秀ですが、「縦横のマス目（グリッド）をキッチリ揃えて並べる」という点においては、CSS Gridの右に出るものはありません。

Flexboxは「横一列（または縦一列）の並び」を調整するのが得意ですが、カード型一覧のような「縦と横の両方を綺麗に揃えたい」レイアウトでは、Gridのauto-fitとminmaxを使うのが、現代のWeb制作における最適解と言えます。

まとめ：モダンCSSでコードをスッキリさせよう

メディアクエリ（@media）はレスポンシブデザインの要ですが、多用しすぎるとCSSファイルが長くなり、後から修正するのが大変になってしまいます。

今回ご紹介したauto-fitとminmaxを使いこなせれば、コーディングの手間が減るだけでなく、どんなデバイスで見ても美しいレイアウトを維持できます。ぜひご自身のブログや制作案件で積極的に活用してみてください！