CSS grid-area内元素是否可流动到多行，实现同类型元素分组排布？

问题原因 #

你出现同组元素挤压在同一行的核心原因是：grid-template-areas 定义的每一个区域名默认只会对应1行网格，所有指定了相同grid-area属性的元素都会被强制放到这一行中，直接覆盖了Grid原本的自动换行排布逻辑。

可行解决方案 #

不需要配置grid-template-areas，改用order属性实现同类元素分组即可，完全保留Grid的自动最优排布能力：

1. 给同类元素设置相同的order值，数值越小的类别排得越靠前
2. 删掉所有元素的grid-area相关配置，保留原本的grid-column配置
3. 把grid-auto-flow改成row dense，开启网格自动补空的最优排布逻辑

修改后的CSS代码 #

.grid-container {
  display: grid;
  grid-template-columns: repeat(12, minmax(24px, 1fr));
  /* 改为row dense实现自动补空的最优排布 */
  grid-auto-flow: row dense;
}

.item {
  height: 24px;
  border: 1px solid black;
  margin: 8px 0;
}

.aa {
  background-color: red;
  order: 2;
}

.bb {
  background-color: green;
  order: 1;
}

.cc {
  background-color: blue;
  order: 3;
}

.dd {
  background-color: yellow;
  order: 4;
}

修改后的HTML代码 #

只需要删掉所有元素style里的grid-area配置，保留原本的grid-column即可：

<div class="grid-container">
  <div class="item aa" style="grid-column: 3 / span 1"></div>
  <div class="item bb" style="grid-column: 5 / span 1"></div>
  <div class="item cc" style="grid-column: 7 / span 1"></div>
  <div class="item cc" style="grid-column: 9 / span 1"></div>
  <div class="item bb" style="grid-column: 2 / span 4"></div>
  <div class="item dd" style="grid-column: 7 / span 3"></div>
  <div class="item bb" style="grid-column: 2 / span 8"></div>
  <div class="item bb" style="grid-column: 1 / span 6"></div>
  <div class="item bb" style="grid-column: 9 / span 3"></div>
  <div class="item dd" style="grid-column: 1 / span 11"></div>
</div>

改完之后同一类的元素会优先排布在对应分组区域，同时自动换行、自动补空，和期望效果完全一致。

CSS Grid与绝对定位的性能差异 #

• 渲染层面：CSS Grid属于浏览器原生布局流，排布计算由浏览器的合成线程直接处理，元素重排时只会影响自身和后续相关的节点，大部分场景下会被浏览器优化，性能更好。
• 绝对定位的元素脱离了正常文档流，每次位置变动都会触发对应定位父级范围内的页面重排，如果有大量绝对定位元素频繁变动位置，性能消耗会远高于Grid布局。
• 动画场景下：如果用top/left控制绝对定位元素做动画，每次变动都会触发重排，性能远差于Grid布局；如果两者都用transform做偏移动画，性能表现基本一致。

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