【入門編】CSS Gridにおけるインライン要素のグリッドアイテム化 – HTML実践ガイド

こんにちは！フロントエンドの世界へようこそ。
HTMLとCSSを学び始めると、「あれ？なぜか思った通りに配置されないぞ？」と頭を抱える瞬間が必ず訪れますよね。その中でも特に多くの人が「魔法のようで実は気難しい」と感じるのが、CSS Gridとインライン要素の不思議な関係です。

今日は、そんな「CSSの不思議な挙動」を、お買い物の流れに例えてやさしく紐解いていきましょう。

—

1. CSS Gridの「お買い物ルール」をイメージしてみよう

まず、CSS Gridを「商品をきれいに並べるための最新式の棚」だと想像してください。
この棚（Gridコンテナ）の中に商品を置くとき、CSS Gridには一つの厳格なルールがあります。それは、「商品はすべて『箱』に入っていないといけない」ということです。

普段、私たちがHTMLで書く `` や `` といったインライン要素は、箱に入っていない「むき出しの果物」のようなもの。CSS Gridは、このむき出しのアイテムを見つけると、親切心から「おっと、箱がないならこっちで用意してあげるよ！」と、透明な箱（匿名グリッドアイテム）の中に勝手に詰め込んでしまうんです。

このとき、CSSで以下のように指定するとどうなるでしょうか。

.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}

ブラウザの中では、実はこんなことが起きています。

1. `span`（りんご）は、見えない箱Aに入れられる。
2. `a`（バナナ）は、見えない箱Bに入れられる。
3. `strong`（みかん）は、見えない箱Cに入れられる。

これだけなら良いのですが、もしこの中に「むき出しのテキスト（ただの文字）」が混ざっていたらどうなるでしょう？

実は、この「おいしいフルーツだよ！」というただの文字列も、強制的に一つの箱に入れられて、一つのグリッドアイテムとして扱われてしまうのです。これによって、レイアウトが崩れたり、CSSの制御が効かなくなったりしてしまいます。

—

3. 「勝手に箱詰め」を防ぐための解決策

「ブラウザに勝手に箱詰めされたくない！」というときは、どうすればいいのでしょうか？ 答えはシンプル。「最初から自分たちで箱に入れてあげる」ことです。

HTMLを少しだけ書き換えて、インライン要素を `