css gridレイアウトが思い通りに適応できなかった

背景

gridレイアウトに初挑戦したが、めちゃめちゃ初歩的なことで躓いたので備忘録として残します。

gridレイアウトとは

マス目状の領域を用意して、子要素を配置する機能となんとなく理解した。

上手くいかなかった例

box1の位置に、すべてのdiv要素が押し込まれる形になってしまった。

css

.link-box {
  display: grid;
  column-gap: 2rem;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 2rem 1fr;
  grid-template-areas:
    "box1 box2"
    "box1 box3";
  .box1 {
    grid-area: box1;
  }
  .box2 {
    grid-area: box2;
  }
  .box3 {
    grid-area: box3;
  }
}

html

<%= link_to @shop.link1, class: "link-box" do %>
  <% if @shop.link1 %>
      <div class="box1"><span class="fa-duotone fa-solid fa-link fa-size"></span></div>
      <div class="box2"><%= @shop.link1_comment %></div>
      <div class="box3"><%= @shop.link1 %></div>
  <% end %>
<% end %>

原因

以下の記事に記載があるように、「直接の子要素」がアイテムとみなされるため、if-endで囲われた範囲が一つのアイテムとみなされていた。

アイテム
コンテナの子要素です。コンテナの直接の子要素は基本的にすべてアイテムになります。

<div style="display:grid;"> <!-- コンテナ -->
  <div></div> <!-- アイテム-->
  <p></p> <!-- アイテム -->
  <section> <!-- アイテム -->
  	<div></div> <!-- これはアイテムではない -->
  </section>
</div>

修正内容

div要素それぞれが、コンテナの直接の子要素となるように修正した。

html

<% if @shop.link1 %>
  <%= link_to @shop.link1, class: "link-box" do %>
      <div class="box1"><span class="fa-duotone fa-solid fa-link fa-size"></span></div>
      <div class="box2"><%= @shop.link1_comment %></div>
      <div class="box3"><%= @shop.link1 %></div>
  <% end %>
<% end %>