CSS Grid模板区域自动放置时第五个容器仅单行高问题

CSS 样式 #

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
}


body,
html {
  height: 100%;
  width: 100%;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrapper {
  width: 1000px;
  background-color: rgb(32, 156, 88);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: "img content content"
                       "side content content";
}

.wrapper div {
  background-color: rgb(226, 228, 131);
  border: 1px solid rgb(41, 135, 151);
}

.wrapper div:nth-child(5) {
  grid-area: content;
}

.wrapper div:nth-child(1) {
  grid-area: side;
}

.wrapper div:nth-child(2) {
  grid-column: 1 / span 2;
}

HTML 结构 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Popup Image Slider</title>
  <script src="test.js" defer></script>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="wrapper">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
    <div>Six</div>
    <div>Seven</div>
    <div>Eight</div>
  </div>
</body>

</html>

这个渲染结果完全符合CSS Grid规范，不是自动放置算法的bug。你观察到的“第五个容器仅占单行高度”是视觉错觉，实际上被分配到content命名区域的第五个div（Five）已经正确占据了该区域对应的2行2列的全部范围，具体原因如下：

• 你给所有.wrapper下的div设置了完全相同的背景色与边框样式，元素发生重叠时完全无法通过视觉区分边界。
• 你在grid-template-areas中定义了img命名区域，但没有给任何网格项绑定grid-area: img，该区域对应的第一行第一列单元格初始为空闲状态。
• CSS Grid的元素放置遵循固定流程：
  1. 优先放置所有显式指定完整位置的元素：第一个div（One）被分配到side区域（第二行第一列），第五个div（Five）被分配到content区域（跨第一、二行，覆盖第二、三列）。
  2. 接着处理部分显式定位的元素：第二个div（Two）只设置了跨2列的列规则、未指定行位置，自动放置算法会优先寻找最早能容纳它的空闲位置，也就是第一行第一列起始跨2列的位置，这个位置的列2部分刚好和Five的content区域重叠。
  3. 最后放置完全无显式定位的剩余元素：第三个div（Three）会自动填充到第一行剩余的第三列空位，这个位置同样属于Five的content区域范围，和Five发生重叠。
• 由于你没有为任何元素设置特殊层叠规则，重叠区域的元素因为样式完全一致，Five在第一行的所有部分被Two、Three完全遮盖，只有第二行的第二、三列部分没有被其他元素遮挡，肉眼看起来就像只占了单行高度。

你可以通过给Five设置独有的背景色，或者给它添加更高的z-index，直接验证它实际是跨2行高度的。

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