CSS Grid间隙比例适配：解决缩放时的动态调整问题

问题说明 #

我需要创建一个带有预定义区域、固定宽高比的拼贴画，要求边框和网格间隙能随拼贴画自身尺寸动态适配（不绑定视口宽度）。但使用百分比值设置gap时遇到两个问题：

• row-gap基于网格高度计算，和column-gap的视觉表现不一致
• 间隙数值较大时，会导致网格内容溢出容器

现有实现代码 #

CSS代码 #

:root {
  --border: 5%;
  --gap: 5%;
}

* {
  box-sizing: border-box;
}

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
  gap: var(--gap);
  padding: var(--border);
  background: red;
  width: 100%;
  aspect-ratio: 2;
}

.grid div {
  background: blue;
  &:nth-child(1) {
    grid-column: 1/6;
    grid-row: 1/4;
  }
  &:nth-child(2) {
    grid-column: 6/10;
    grid-row: 1/4;
  }
  &:nth-child(3) {
    grid-column: 10/13;
    grid-row: 1/6;
  }
  &:nth-child(4) {
    grid-column: 1/4;
    grid-row: 4/8;
  }
  &:nth-child(5) {
    grid-column: 4/10;
    grid-row: 4/10;
  }
  &:nth-child(6) {
    grid-column: 10/13;
    grid-row: 6/10;
  }
  &:nth-child(7) {
    grid-column: 1/4;
    grid-row: 8/13;
  }
  &:nth-child(8) {
    grid-column: 4/9;
    grid-row: 10/13;
  }
  &:nth-child(9) {
    grid-column: 9/13;
    grid-row: 10/13;
  }
}

HTML代码 #

<div id="collage" class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

解决方法 #

方法1：基于宽度统一计算行/列间隙 #

利用拼贴画的固定宽高比，将row-gap转换为基于宽度的比例值，确保和column-gap视觉一致；同时通过嵌套容器分离边框和网格，避免溢出：

:root {
  --border: 5%;
  --gap: 5%;
  --aspect-ratio: 2;
}

* {
  box-sizing: border-box;
}

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}

.grid-wrapper {
  width: 100%;
  aspect-ratio: var(--aspect-ratio);
  padding: var(--border);
  background: red;
}

.grid {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
  column-gap: var(--gap);
  /* 行间隙基于宽度计算，匹配宽高比 */
  row-gap: calc(var(--gap) / var(--aspect-ratio));
}

.grid div {
  background: blue;
  &:nth-child(1) { grid-column: 1/6; grid-row: 1/4; }
  &:nth-child(2) { grid-column: 6/10; grid-row: 1/4; }
  &:nth-child(3) { grid-column: 10/13; grid-row: 1/6; }
  &:nth-child(4) { grid-column: 1/4; grid-row: 4/8; }
  &:nth-child(5) { grid-column: 4/10; grid-row: 4/10; }
  &:nth-child(6) { grid-column: 10/13; grid-row: 6/10; }
  &:nth-child(7) { grid-column: 1/4; grid-row: 8/13; }
  &:nth-child(8) { grid-column: 4/9; grid-row: 10/13; }
  &:nth-child(9) { grid-column: 9/13; grid-row: 10/13; }
}

对应的HTML调整为嵌套结构：

<div class="grid-wrapper">
  <div id="collage" class="grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  </div>
</div>

方法2：用fr单位分配间隙空间 #

将间隙纳入网格轨道的整体计算，用fr单位同时分配单元格和间隙的空间，确保内容不会溢出：

:root {
  --border: 5%;
  --gap-count-col: 11; /* 12列网格对应11个列间隙 */
  --gap-count-row: 11; /* 12行网格对应11个行间隙 */
  --gap-factor: 0.05; /* 对应原5%的间隙比例 */
}

* {
  box-sizing: border-box;
}

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}

.grid {
  display: grid;
  width: 100%;
  aspect-ratio: 2;
  padding: var(--border);
  background: red;
  /* 合并单元格和间隙轨道 */
  grid-template-columns: repeat(12, 1fr) repeat(var(--gap-count-col), calc(var(--gap-factor) * 1fr));
  grid-template-rows: repeat(12, 1fr) repeat(var(--gap-count-row), calc(var(--gap-factor) * 1fr));
}

.grid div {
  background: blue;
  /* 调整定位，跳过间隙轨道 */
  &:nth-child(1) {
    grid-column: 1 / span 5;
    grid-row: 1 / span 3;
  }
  &:nth-child(2) {
    grid-column: 17 / span 4; /* 前5个单元格+11个间隙=16，起始位置为17 */
    grid-row: 1 / span 3;
  }
  &:nth-child(3) {
    grid-column: 22 / span 3;
    grid-row: 1 / span 5;
  }
  /* 其余单元格需按此逻辑调整列/行起始位置 */
}

这种方法精度更高，但需要手动调整所有网格区域的定位，适合对间隙比例有严格要求的场景。

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