如何在容器宽度变窄时通过CSS Grid重构React表格布局？

当然可以，CSS Grid本身具备强大的响应式布局能力，结合媒体查询就能实现容器宽度变化时的布局重构。针对你的现有代码，给出具体调整方案：

1. 给基础Grid添加响应式列定义 #

修改Grid组件样式，通过媒体查询在窄屏时重新定义网格结构：

const Grid = styled.div`
  display: grid;
  // 宽屏保持原有列布局
  grid-template-columns: minmax(22%,1fr) 30px 4fr 50px 30px 4fr 50px minmax(22%,1fr);
  gap: 8px; // 可选，增加间距提升可读性

  // 窄屏断点示例（可根据实际需求调整宽度值）
  @media (max-width: 768px) {
    grid-template-columns: 1fr; // 切换为单列布局
  }
`;

2. 适配标签行的响应式显示 #

针对标签行的特殊布局，在窄屏时修正label 2的网格列规则，让所有标签正常展示：

const Wrapper = styled(Grid)`
  background-color: white;

  span {
    display: flex;
    align-items: center;
    padding: 4px 0;

    @media (max-width: 768px) {
      grid-column: 1 / -1; // 窄屏时每个标签占满整行
    }
  }
`;

3. 调整数据行的响应式排列 #

给SignalRow添加媒体查询，在窄屏时重新定义内部Item的布局：

const SignalRow = styled(Grid)`
  grid-column: 1 / -1;
  grid-template-columns: inherit; // 宽屏时继承外层列规则

  @media (max-width: 768px) {
    grid-template-columns: repeat(2, 1fr); // 窄屏时改为两列布局，也可设为1fr单列
  }
`;

额外优化建议 #

• 可添加多段媒体查询，针对平板、手机等不同宽度设置更精细的布局
• 给网格项设置min-width，避免内容被过度挤压
• 利用grid-auto-flow属性，在窄屏时调整Item的显示顺序

以上方案完全基于CSS Grid实现，无需额外JS逻辑即可完成容器宽度变化时的布局重构。

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