为一系列Grid网格项设置起始列与起始行的方法

嘿，我来帮你搞定这个CSS Grid的重叠问题！你遇到的情况很典型——当你给多个网格项硬设置相同的grid-row范围（比如1 / 3）时，它们都会挤到同一组行轨道里，自然就重叠了。而移除grid-row后，Grid的自动流特性会帮你把后续项放到下一个可用行，所以不会重叠。

要实现“从指定行/列开始，同时让网格项自动扩展、不重叠”，可以试试这几个方法：

1. 只指定起始行/列，让Grid自动处理结束位置 #

不用写完整的行范围，只给grid-row-start（或者简写grid-row: 起始行号;），Grid会根据网格项的内容高度自动分配足够的行轨道，后续的项也会自动排在它下方，完全不会重叠。

举个实际的代码例子：

.mygrid {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  grid-gap: 20px;
  border: 5px solid red;
}
/* 从第1行开始，自动扩展高度 */
.content-1 {
  grid-column: col-start 4 / span 7;
  grid-row: 1; 
}
/* 从第3行开始，自动扩展 */
.content-2 {
  grid-column: col-start 5 / span 6;
  grid-row: 3; 
}
/* 自动排到content-2下方 */
.content-3 {
  grid-column: col-start 1 / span 3;
}

对应的HTML：

<div class="mygrid">
  <div class="content-1">我是内容1，从第1行开始</div>
  <div class="content-2">我是内容2，从第3行开始，内容多的话会自动增高哦</div>
  <div class="content-3">我是内容3，自动排到内容2下面</div>
</div>

2. 用grid-auto-rows控制自动行的高度（可选） #

如果想让自动生成的行有最小高度限制（避免内容太矮导致布局奇怪），可以加上grid-auto-rows属性，设置成minmax(最小高度, auto)，这样行高会自适应内容，同时保证不会低于你设置的最小值。

修改后的Grid容器样式：

.mygrid {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  grid-gap: 20px;
  border: 5px solid red;
  grid-auto-rows: minmax(100px, auto); /* 最小100px，内容多则自动增高 */
}

关键注意点 #

• 绝对不要给多个网格项设置完全相同的行范围（比如grid-row: 1 / 3），这是导致重叠的核心原因。
• 利用Grid的**自动流（auto-flow）**特性：默认是按行排列，只要你不为每个项强制指定重叠的轨道，它就会自动帮你管理布局顺序。

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