gridとinline-gridの違いを徹底解説！中学生にもわかる使い分けガイド

---

gridとinline-gridの基本的な違いをひとことで理解する

まず大人も子どももつまずきやすい点は「表示の流れと周りとの関係」です。gridはブロック要素として扱われ、周囲の要素を独立した領域として区切り、横並びの列と行をきちんと作れるのが特徴です。横幅は親要素の幅に合わせて広がり、内部のアイテムは grid-template-columns などの指示に従って並びます。対して inline-grid は「インライン要素の箱」として動くため、通常のテキストと同じ行に置くことができます。つまり、inline-grid の箱は文章の中に現れ、改行を強制しない場合もあり、横に並ぶアイテムの数や幅を工夫すれば、テキストと一緒に小さなグリッドを作ることができます。

この違いを押さえるだけで、ページの見た目や使い勝手が大きく変わります。

例えば大きなセクションを均等に分けたいときは grid を選び、補助的に横並びのアイコン群や小さなカードを本文中に挟みたいときは inline-grid を使うのが自然です。

コードを実際に書くときは display プロパティを使い分けるだけで、他のレイアウトモードに影響を与えず柔軟に設計できます。

ここからはもう少し細かい点を見ていきますが、まずはこの「ブロックかインラインか」という基本が、 grid と inline-grid の根本的な違いです。

使い分けの実践ポイントと表での比較

ここでは使い分けのコツと、 grid と inline-grid の性質を整理した表を紹介します。

まず実務での使い分けは次のようになります。

・大きなレイアウトを組むときは grid を使う。

・本文中に小さなグリッドを混ぜたいときは inline-grid を使う。

・グリッドの列を増減させたいときは grid-template-columns を活用する。

・アイテムの配置を細かく制御したい場合は align-items、justify-items、gap などのプロパティを併用する。

以下の表で特徴を比べます。

<table>項目gridinline-grid基本的な挙動ブロックレベルの箱。新しい行を作り、大きな領域を作りやすいインライン要素の箱。テキストの流れの中に現れ、改行を保つ場面がある親要素との関係親の幅を基準に広がる。外側の余白やボーダーに影響を受けやすい横並びの一部として扱われ、周りのテキストと同じ行に収まりやすい代表的な用途大きなレイアウトの基盤作成。カードのグリッドや写真（関連記事：写真ACを三ヵ月やったリアルな感想【写真を投稿するだけで簡単副収入】）ギャラリー本文中の小さな並び、アイコン集合、ニュースのチラシ風配置主要なプロパティgrid-template-columns/rows、gap、align-items、justify-itemsgrid-template-columns/rows、gap、align-itemsだが inline 要素として振る舞うtable>

この表を見れば、どちらを使うべきかが直感的に分かります。

実践では、まず大枠のレイアウトを grid で作り、補足的な小さなセルを inline-grid で並べると、視覚的にも動作的にも扱いやすくなります。

さらに、grid と inline-grid を混在させる場合、親要素の CSS ルール（display の継承など）に注意することが重要です。

例えば大きなセクションを grid で作りつつ、セクション内の横並びカードは inline-grid で配置するという組み合わせが実務でよく使われます。

このように、gridとinline-grid は使い方の幅を広げる道具です。使いこなせば、ページの見た目と使いやすさを両立でき、コード量を過剰に増やさずにも済みます。

ピックアップ解説

今日は inline-grid について友達と雑談する感じで話してみます。たとえば、写真を並べるとき、グリッド全体を区切るのが grid なら、横にちょっと待って、アイコンや小さなカードを並べるのが inline-grid の得意技です。テキストの流れの中に小さなグリッドを置ける利点は、説明文とビジュアルを一緒に見せたい時に強いです。使い方のコツは、列幅を grid-template-columns で厳密に決めつつ、gap で余白を取ること。もし行間が窮屈なら align-items を調整。結局、場面に合わせて grid と inline-grid を使い分ける柔軟さこそが現代のウェブのコツなんです。

---