跨容器Grid列对齐问题：实现间隙对齐与2fr元素等宽

原布局的核心问题是两个网格的列宽计算逻辑不统一，导致间隙错位、2fr元素宽度不一致。通过统一列宽基准并调整网格布局规则，可以轻松解决这个问题：

解决方案步骤 #

1. 统一布局基准：用CSS变量定义全局间隙值和基础列单元宽度，确保两个网格的计算逻辑一致
2. 调整大网格列宽：第一个大网格的左侧列宽度设置为「2个基础单元+内部间隙」，右侧列宽度匹配第二个网格的2fr单元
3. 对齐子网格列宽：让第一个网格内部的子列宽度与第二个网格的侧边列完全一致

修改后的代码 #

CSS

* {
  font-family: sans-serif
}

:root {
  --gap: 30px;
  /* 计算基础列单元宽度：总宽度减去2个间隙后分成4份，对应第二个网格1fr的宽度 */
  --fr-unit: calc((100% - 2 * var(--gap)) / 4);
}

.container {
  width: 100%;
  margin-bottom: 30px;
}

.grid-2 {
  display: grid;
  /* 左侧列：2个基础单元 + 子网格间隙，右侧列：2个基础单元（匹配第二个网格的2fr） */
  grid-template-columns: calc(2 * var(--fr-unit) + var(--gap)) calc(2 * var(--fr-unit));
  grid-template-rows: minmax(240px, auto);
  gap: var(--gap);
}

.grid-1-2-1 {
  display: grid;
  grid-template-columns: var(--fr-unit) calc(2 * var(--fr-unit)) var(--fr-unit);
  grid-template-rows: minmax(240px, auto);
  gap: var(--gap);
  width: 100%;
}

.grid-1 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: auto;
  gap: var(--gap);
  box-shadow: none !important;
}

.grid-2x2 {
  display: grid;
  grid-template-columns: var(--fr-unit) var(--fr-unit);
  grid-template-rows: auto;
  gap: var(--gap);
  box-shadow: none !important;
}

.child {
  background-color: #cccccc;
  border: solid 1px blue;
  padding: 10px;
}

HTML（无需修改）

<div class="container">
  <div class="grid-2">
    <div class="grid-2x2">
      <div class="child">one</div>
      <div class="child">two</div>
      <div class="child">three</div>
      <div class="child">four</div>
    </div>
    <div class="child">five</div>
  </div>
</div>
<div class="container">
  <div class="grid-1-2-1">
    <div class="grid-1">
      <div class="child">one</div>
      <div class="child">two</div>
    </div>
    <div class="child">tree</div>
    <div class="child">four</div>
  </div>
</div>

效果说明 #

• 所有网格间隙（包括子网格的内部间隙）完全对齐
• 第一个网格的右侧元素宽度与第二个网格的中间2fr元素宽度完全一致
• 布局逻辑统一，后续调整间隙或列比例只需修改CSS变量即可

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