CSS Grid布局降级为表格布局失效，@supports配置排查求助

看起来你是想实现「支持Grid的浏览器用Grid布局，不支持的用表格布局」的降级方案，但@supports的配置逻辑可能搞反了，或者规则覆盖没到位。咱们一步步来调整：

核心思路 #

正确的降级逻辑应该是：

1. 先写所有浏览器都能识别的表格布局样式（作为降级方案）
2. 再用@supports (display: grid)包裹Grid布局的样式，这样支持Grid的浏览器会自动覆盖掉之前的表格样式，不支持的则忽略这部分，继续用表格布局。

完整代码示例 #

我把你的代码补全并调整了顺序，你可以参考：

html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

/* 第一步：先写降级的表格布局样式（所有浏览器都生效） */
.wrapper-of-wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  display: table;
  table-layout: fixed; /* 让表格列宽更可控，贴近Grid的响应式表现 */
}

/* 表格布局的容器 */
.grid-container {
  display: table-row;
}

/* 表格布局的项目 */
.grid-item {
  display: table-cell;
  padding: 1rem;
  border: 1px solid #ccc;
  vertical-align: top; /* 统一垂直对齐方式 */
}

/* 第二步：用@supports包裹Grid布局，仅支持Grid的浏览器生效 */
@supports (display: grid) {
  .wrapper-of-wrapper {
    display: flex; /* 还原你原本的flex容器设置 */
    align-items: center;
    justify-content: center;
  }

  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 示例列数，可替换成你的实际配置 */
    gap: 1rem;
    width: 90%;
    max-width: 1200px;
  }

  .grid-item {
    display: block; /* 覆盖表格布局的table-cell属性 */
    border: 1px solid #ccc;
    padding: 1rem;
  }
}

关键注意点 #

• 顺序不能乱：必须先写降级的表格样式，再写@supports块里的Grid样式，这样Grid规则才能正确覆盖表格规则。
• 明确覆盖冲突属性：比如Grid布局里的.grid-item要把display: table-cell改成display: block（或者Grid默认的grid-item，写block兼容性更稳妥），避免样式冲突。
• 表格布局优化：加上table-layout: fixed能让表格列宽更稳定，和Grid的响应式表现更接近。

如果你的原有Grid布局有更复杂的设置（比如不同列宽、行高、区域划分），只需要把对应的Grid规则放到@supports块里，确保每个需要覆盖的表格属性都被重新定义即可。

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