固定行列数CSS Grid溢出布局咨询：元素超出后如何下方排布

可以实现。核心是通过Grid的轨道定义和自动流特性，结合最小高度设置来满足两种场景的需求：

实现思路 #

• 给Grid容器设置min-height: 100vh，确保内容能容纳在6行3列时，容器占满屏幕高度；
• 定义初始的6行3列网格轨道，溢出时通过grid-auto-rows让新增的行自适应内容高度；
• 固定核心元素的网格区域，溢出元素会自动流到网格下方的新增行中，不会影响原有元素的位置。

修改后的代码 #

CSS #

.container {
  display: grid;
  min-height: 100vh;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(0, auto);
}

.container > div {
  border: 1px solid black;
  box-sizing: border-box;
}

.item1 {
  grid-row: 1 / span 3;
  grid-column: 1 / span 2;
}

.item2 {
  grid-row: 4 / span 3;
  grid-column: 1 / span 2;
}

.item3 {
  grid-row: 1 / span 2;
  grid-column: 3;
}

.item4, .item5 {
  grid-column: 1 / span 2;
  /* 可选：保持和原网格行高度一致，移除则自适应内容 */
  min-height: calc(100vh / 6);
}

HTML #

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
</div>

关键细节说明 #

• 容器的min-height: 100vh保证无溢出时占满屏幕，6行平分屏幕高度；
• grid-auto-rows: minmax(0, auto)让溢出时新增的行根据内容自动调整高度；
• item4和item5未指定行位置，会自动流到item2所在的第6行下方，同时通过grid-column: 1 / span 2对齐到item2的正下方；
• box-sizing: border-box避免边框撑大容器，保证网格轨道尺寸准确。

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