CSS Grid行/单元格自定义高度问题：广告行自适应方案咨询

我们有一个由CMS管理员维护的CSS Grid布局，管理员可添加元素并设置宽度填充网格。其中标记为special的元素是固定宽高比的广告，Grid宽度随站点灵活变化，广告高度按比例计算（示例中为100px），小于Grid默认行高120px。

由于grid-auto-flow: row dense的自动排布特性，广告元素的位置无法提前预测（可能被自动流到任意可用行），因此无法通过grid-template-rows直接指定对应行的高度。需要实现广告所在行的高度自动适配广告本身的高度，同时不影响其他行的默认120px行高。

核心思路 #

将Grid的自动行高从固定值改为auto，让行高由内容决定；同时给普通元素设置min-height: 120px保证默认行高，广告元素则取消该限制并设置固定高度，实现行高自适应。

修改后的代码 #

CSS

#grid {
  display: grid;
  width: 600px;
  grid-auto-rows: auto; /* 行高由内容自动适配 */
  grid-template-columns: repeat(5, 1fr);
  grid-auto-flow: row dense;
  gap: 10px;
}
#grid .item {
  background-color: #eee;
  text-align: center;
  font: 1.5em bold;
  line-height: 120px;
  min-height: 120px; /* 普通元素保持最低120px行高 */
}
#grid .item.width2 {
  grid-column: auto / span 2;
}
#grid .item.width3 {
  grid-column: auto / span 3;
}
#grid .item.special {
  grid-column: auto / span 5 !important;
  height: 100px;
  min-height: unset; /* 取消普通元素的最小高度限制 */
  line-height: 100px; /* 适配广告高度，保证文字居中 */
}

HTML（无需修改）

<div id='grid'>
  <div class='item link width2'>Link 1</div>
  <div class='item link width3'>Link 2</div>
  <div class='item offer width3'>Offer 1</div>
  <div class='item special width2'>*Special*</div>
  <div class='item offer width2'>Offer 2</div>
  <div class='item offer width2'>Offer 3</div>
  <div class='item link'>Link 3</div>
  <div class='item offer width2'>Offer 4</div>
</div>

方案说明 #

1. grid-auto-rows: auto：让Grid的每一行高度自动适配该行内最高元素的高度，解决了无法预测广告位置导致的行高无法提前设置的问题。
2. 普通元素的min-height: 120px：确保非广告元素的行高不会低于原来的默认值120px，保持原有布局效果。
3. 广告元素的min-height: unset：取消最小高度限制，让广告的固定高度100px决定所在行的高度。
4. 调整line-height：保证不同高度的元素内文字都能垂直居中。

这个方案完全兼容CMS的动态编辑场景，管理员只需给广告元素添加special类即可，无需额外调整布局配置。

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