CSS subgrid替代方案咨询：基于Grid布局的可排序行表格实现

嘿，我完全懂你的痛点——既要用Grid做自适应列的表格，又要给每行加容器实现jQuery排序，subgrid支持度拉胯，嵌套Grid列宽又对不齐。给你几个亲测有效的方案：

方案一：单个Grid容器+行级包裹容器 #

把整个表格做成一个大Grid，给每行套一个容器但让它不干扰布局，所有单元格直接归属于外层Grid。这样所有列的宽度天然同步，排序时只需要移动行容器就行，完全不影响列对齐。

举个简单的实现示例：

.table-wrapper {
  display: grid;
  grid-template-columns: auto auto auto; /* 自适应列宽，随内容调整 */
  gap: 10px;
}

.row-container {
  /* 无需设置display: grid，单元格直接受外层Grid控制 */
}

.cell {
  padding: 8px;
  border: 1px solid #eee;
}

然后给每个单元格指定对应列：第一列单元格加grid-column: 1，第二列加grid-column: 2，以此类推。不管怎么移动.row-container，单元格都会牢牢待在对应列里，列宽完全同步。

方案二：CSS变量统一列宽 #

如果你一定要给每行单独套Grid容器，那可以用JS计算第一行的列宽，把值存成CSS变量，让所有行的Grid布局共享这些变量。

步骤大概是这样：

1. 页面加载时，获取第一行每个单元格的宽度（用offsetWidth）
2. 把宽度赋值给全局CSS变量，比如document.documentElement.style.setProperty('--col1-width', col1Width + 'px')
3. 所有行容器的Grid布局写成：grid-template-columns: var(--col1-width) var(--col2-width) var(--col3-width)
4. 窗口resize时重新计算更新变量

这样所有行的列宽就完全一致了，排序时只需要操作行容器，列宽不会乱。

方案三：用display: contents（最推荐！） #

这个属性简直是为你的需求量身定做的——它会让行容器不产生任何布局盒，容器里的单元格直接继承外层Grid的布局规则。也就是说，你可以给每行套一个.row-container用来排序，但布局上这些单元格就像直接放在外层Grid里一样，列宽自动同步，完全不用额外处理。

代码示例：

.table-grid {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 8px;
}

.row-container {
  display: contents; /* 关键属性：让容器“消失”，子元素直接参与外层Grid */
}

.cell {
  background: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
}

用jQuery排序时，直接把.row-container作为排序对象就行：

$('.table-grid').sortable({
  items: '.row-container',
  // 其他排序配置
});

这个方法的兼容性比subgrid好太多，现在Chrome、Firefox、Edge都支持，完全能满足大部分场景。

总结一下，优先选方案三，简单又靠谱；如果需要兼容特别老的浏览器，方案一也能完美解决问题。

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