如何让CSS Grid中所有单元格尺寸严格相等？

DevOps 小满

2026-6-15

解决方案

要实现4×2的等宽等高网格且子元素不会拉伸单元格，需从网格容器配置、子元素约束两方面调整：

1. 修正网格容器样式

显式定义网格行列结构，替代依赖grid-auto-*的方式，确保行列尺寸基于容器均等分配：

export const WidgetsGrid = styled.div` 
  width: 100%; 
  height: 100%; 
  display: grid; 
  gap: 1rem; 
  // 明确2行4列，每行每列均等分配空间
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(4, 1fr);
`

注意：容器的父元素必须设置明确的宽高（比如固定值或100vh/100vw），否则容器的width:100%和height:100%无法生效，fr单位会失去参考基准，导致单元格被内容拉伸。

2. 正确配置`grid-template-areas`

确保区域定义与2行4列的结构匹配，例如：

const gridTemplateAreas = `
  "widget1 widget2 widget3 widget4"
  "widget5 widget6 widget7 widget8"
`;

<WidgetsGrid style={{ gridTemplateAreas }}>
  <div style={{ gridArea: "widget1" }}>子元素1</div>
  <div style={{ gridArea: "widget2" }}>子元素2</div>
  {/* 其余6个子元素依次对应widget3到widget8 */}
</WidgetsGrid>

3. 约束子元素尺寸

给每个网格子元素添加样式，强制其不超出单元格范围：

.grid-item {
  width: 100%;
  height: 100%;
  overflow: auto; // 内容超出时显示滚动条，也可设为hidden隐藏
  box-sizing: border-box; // 避免内边距/边框撑大元素
}

如果子元素内部有较大内容，也可通过flex布局让内容自适应：

.grid-item {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.grid-item-content {
  flex: 1;
  overflow: auto;
}