CSS Grid布局兼容降级方案求助：固定结构元素按类分3列

嘿，这个兼容难题确实挺让人头疼的，我来给你梳理几个可行的解决方案——既能满足现代浏览器的优雅Grid布局，又能给老浏览器做无缝降级，而且完全不用改HTML结构！

这是最简洁高效的方案，直接利用Grid的列定位能力，把同类元素精准放到对应列：

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列等宽分配空间 */
  gap: 1rem; /* 可选，列/行之间的间距，让布局更透气 */
}

/* 指定每个类别的元素属于哪一列 */
.column-1 { grid-column: 1; }
.column-2 { grid-column: 2; }
.column-3 { grid-column: 3; }

这样所有带column-1的div会自动排列在第一列，column-2在第二列，column-3在第三列，每列刚好3个元素，完美对齐，不需要额外调整。

如果要兼容不支持Grid的浏览器（比如IE11），可以用Flexbox结合高度控制来实现纵向分栏：

2.1 固定高度场景 #

如果每个.col的高度是固定的，用@supports做特性检测，给不支持Grid的浏览器单独写规则：

@supports not (display: grid) {
  .grid {
    display: flex;
    flex-direction: column; /* 纵向排列元素 */
    flex-wrap: wrap; /* 高度不足时自动换行 */
    height: 360px; /* 假设每个.col高度120px，3个总高度+间距，根据实际调整 */
  }

  .col {
    width: calc(33.333% - 0.666rem); /* 减去间距的影响，保证三列刚好占满容器 */
    margin-bottom: 1rem;
  }

  /* 调整order让同类元素连续排列 */
  .column-1 { order: 1; }
  .column-2 { order: 2; }
  .column-3 { order: 3; }
}

原理：纵向排列的Flex容器在达到设置的高度后，会自动把后续元素放到下一列，刚好让3个同类元素填满一列，完美实现需求。

2.2 动态高度场景（无固定高度） #

如果.col的高度不固定，就需要用JavaScript动态计算容器高度，保证能放下3个元素：

// 检测浏览器是否不支持Grid
if (!CSS.supports('display', 'grid')) {
  const grid = document.querySelector('.grid');
  const cols = document.querySelectorAll('.col');
  
  // 计算所有.col中的最大高度（避免高度不一致导致错位）
  let maxColHeight = 0;
  cols.forEach(col => {
    maxColHeight = Math.max(maxColHeight, col.offsetHeight);
  });
  
  // 设置容器高度为3个最大高度 + 2个底部间距（因为3个元素有2个间距）
  const marginBottom = parseInt(getComputedStyle(cols[0]).marginBottom);
  grid.style.height = `${maxColHeight * 3 + marginBottom * 2}px`;
}

配合上面的Flexbox CSS，就能实现自适应高度的分栏效果，不用硬写固定值。

如果还要兼容更老的浏览器（比如IE10），可以用浮动+负外边距的方案，不过这个需要知道.col的固定高度：

/* 针对不支持Grid和Flexbox的老浏览器 */
.grid {
  overflow: hidden; /* 清除浮动影响 */
  width: 100%;
}

.col {
  float: left;
  width: 33.333%;
  margin-bottom: 1rem;
}

/* 通过负外边距把同类元素拉到上一个元素的下方 */
.column-1:nth-child(4),
.column-1:nth-child(7) {
  margin-top: -calc(120px + 1rem); /* 120px是.col高度，1rem是底部间距 */
}
.column-1:nth-child(7) {
  margin-top: -calc(240px + 2rem); /* 拉到第三行位置 */
}

.column-2:nth-child(5),
.column-2:nth-child(8) {
  margin-top: -calc(120px + 1rem);
}
.column-2:nth-child(8) {
  margin-top: -calc(240px + 2rem);
}

.column-3:nth-child(6),
.column-3:nth-child(9) {
  margin-top: -calc(120px + 1rem);
}
.column-3:nth-child(9) {
  margin-top: -calc(240px + 2rem);
}

如果高度不固定，同样可以用JavaScript动态计算负外边距的值，替换上面的固定数值。

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