如何实现CSS Grid元素自下而上而非自上而下的填充排列

CSS Grid 自下而上填充实现方案 #

方案1：纯CSS翻转实现（兼容性最优，代码量最小） #

利用垂直翻转容器再翻转子元素的方式，可快速实现需求，仅需修改CSS如下：

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 306px;
  border: 1px solid black;
  /* 新增两行 */
  transform: scaleY(-1);
  align-content: start; /* 多余空白留在顶部，避免元素分散排布 */
}

.gridItem {
  width: 100px;
  height: 100px;
  border: 1px solid orange;
  /* 新增一行，把内容翻正 */
  transform: scaleY(-1);
}

该方案对动态新增的元素也自动生效，兼容所有支持CSS Grid的浏览器。

方案2：JS动态计算定位（无翻转副作用） #

如果需要避免transform带来的堆叠上下文、事件坐标偏移等问题，可以用JS手动计算每个元素的网格位置：

const grid = document.querySelector('.grid')
const items = Array.from(document.querySelectorAll('.gridItem'))
const columnNum = 3 // 和你定义的网格列数保持一致
const totalRow = Math.ceil(items.length / columnNum)

items.forEach((item, idx) => {
  const currentCol = (idx % columnNum) + 1
  const currentRow = totalRow - Math.floor(idx / columnNum)
  item.style.gridColumn = currentCol
  item.style.gridRow = currentRow
})

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