CSS Grid指定单个grid-area为何生成3×2网格并错位放置元素？

问题描述 #

我创建了包含2个区域的CSS Grid布局，使用grid-template-areas: "list details"时显示正常。但仅指定单个区域grid-template-areas: "list"时，为何会生成3×2的网格，且第二个区域元素被放置在右下角轨道中？

示例代码 #

CSS

#main {
    display: grid;
    grid-template-areas:
        "list";
}

#main .list {
    background: yellow;
    grid-area: list;
}

#main .details {
    background: green;
    grid-area: details;
}

HTML

<main id="main">
  <article class="list">
    <ul>
      <li>one</li>
      <li>two</li>
    </ul>
  </article>

  <article class="details">
    <h3>Details</h3>
    <p>
      some details
    </p>
  </article>
</main>

原因分析 #

核心是Grid规范中隐式轨道自动创建和grid-area属性的默认行为共同作用的结果：

• 显式网格的初始范围：当设置grid-template-areas: "list"时，仅定义了1行×1列的显式网格轨道，对应命名区域list。
• 未定义命名区域的处理规则：.details元素设置了grid-area: details，但该命名区域并未在显式网格中声明。根据规范，浏览器会自动创建隐式轨道来容纳这个未匹配的元素。
• 3×2网格的具体生成逻辑：
  • 列方向：显式列只有1列，浏览器会额外生成2列隐式轨道以匹配grid-area的默认扩展行为，最终形成3列。
  • 行方向：显式行只有1行，浏览器额外生成1行隐式轨道，最终形成2行。
  • 未匹配元素的放置：.details会被自动放置到最后一组可用的轨道（即右下角位置）。

解决方法 #

如果不需要额外的隐式轨道，可选择以下方式：

• 显式声明所有用到的命名区域，空区域可用.占位，比如：

  #main {
      grid-template-areas: "list .";
  }
  

• 不给未在显式网格中定义的元素设置grid-area命名，改用grid-column/grid-row明确指定位置，或让元素按默认流排列。

内容的提问来源于stack exchange，提问作者John Smith