CSS Grid中.row设grid-column:span3后，无需Flexbox能否排布内部元素？

给.row设置grid-column: span 3后，完全不需要依赖Flexbox就能搞定内部子元素的排布，我给你分享几种实用的方法：

1. 嵌套CSS Grid（最推荐） #

既然你已经在使用Grid布局，直接给.row本身也设置为Grid容器是最契合的方案，布局逻辑和父网格保持一致，灵活性拉满。

比如你可以根据子元素的需求定义列模板，让标题和两个单元格各占对应空间：

.row {
  grid-column: span 3;
  display: grid;
  /* 标题自适应宽度，两个单元格均分剩余空间 */
  grid-template-columns: auto repeat(2, 1fr);
  gap: 1rem; /* 可选，给元素间增加间距 */
  align-items: center; /* 让所有元素垂直居中对齐 */
}

这种方法能轻松应对不同的布局需求，比如调整列宽、换行、对齐方式等，后续维护也很方便。

2. 使用Inline-block #

这是比较传统的横向排布方式，把所有子元素设置为inline-block，就能让它们在同一行显示，再配合宽度和对齐属性调整布局：

.row {
  grid-column: span 3;
  /* 可选，消除inline-block元素间的空白间隙 */
  font-size: 0;
}
.row > * {
  display: inline-block;
  font-size: 1rem; /* 恢复字体大小 */
  width: 30%; /* 按需调整宽度，比如三个元素各占约1/3 */
  vertical-align: middle; /* 让元素垂直居中 */
}

这种方法适合简单的横向布局，兼容性也很好，不过要注意处理元素间的空白间隙问题。

3. 使用Float #

浮动也是早期实现横向布局的常用手段，给子元素设置float属性，再通过触发BFC清除浮动即可：

.row {
  grid-column: span 3;
  overflow: hidden; /* 触发BFC，自动清除内部浮动 */
}
.row h2 {
  float: left;
  width: auto;
  margin-right: 1.5rem; /* 给标题和单元格之间留出间距 */
}
.row span {
  float: left;
  width: calc((100% - 120px - 1.5rem)/2); 
  /* 假设标题宽度约120px，计算两个单元格的均分宽度 */
}

不过浮动布局容易出现布局坍塌的问题，现在已经不是首选，但如果是兼容旧浏览器的场景还是能用的。

4. 使用绝对定位 #

如果你的子元素位置是固定的，也可以用绝对定位来排布，但这种方法会让元素脱离文档流，灵活性较差，适合特定场景：

.row {
  grid-column: span 3;
  position: relative; /* 把.row设为定位上下文 */
  min-height: 40px; /* 给容器设置最小高度，避免塌陷 */
}
.row h2 {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%); /* 垂直居中标题 */
}
.row span {
  margin-left: 130px; /* 给标题留出足够空间 */
  display: inline-block;
  width: 45%;
}

总的来说，嵌套CSS Grid是最推荐的方案，不仅和你现有的Grid布局逻辑统一，还能应对各种复杂布局需求。

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