为什么在两个 50% CSS 网格列上强制水平滚动？

Question

为什么将两个 CSS Grid 列显式设置为 50%，每个列会创建超出视口宽度 100% 的水平滚动？

基本上，当网格设置为以下 css 时，它会生成一个两列布局，没有超出视口宽度的强制水平滚动：

.grid {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 50%;
  grid-template-areas: 'item item';
}

当grid-template-columns更改为显式设置两个列宽时，结果是带有水平滚动条的两列布局：

.grid {
  grid-template-columns: 50% 50%;
}

为什么水平滚动出现在第二个上下文中，而不是第一个？

编辑：<aside>我似乎记得 flexbox 的行为方式类似</aside>

.grid {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 50%;
  grid-template-areas: 'item item';
}

.grid {
  grid-template-columns: 50% 50%;
}

Answer 1

您的代码（版本 1）：

.grid {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 50%;
  grid-template-areas: 'item item';
}

这不会使容器溢出。

两个显式列由grid-template-areas.

第一列的宽度设置grid-template-columns为 50%。

未设置第二列的宽度。因此，grid-template-columns计算为none( spec )。

该网格规格不出现细讲如何grid-template-columns: none应该适用于一个明确的轨道。但以下是 Chrome、Firefox 和 Edge 正在做的事情：

即使第二列是明确的，因为它是由定义的grid-template-areas，出于轨道调整大小的目的，它被认为是implicit，因为grid-template-columns尚未定义。
因此，第二列的大小由grid-auto-columns隐式列的大小函数 ( demo ) 调整。
的默认值grid-auto-columns是auto( spec ) 1fr，根据定义，它在许多情况下呈现很像)。
所以第二列只消耗剩余空间，这导致它填充行。不会触发溢出。

您的代码（版本 2）：

.grid {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 50% 50%;
  grid-template-areas: 'item item';
}

这个更容易遵循。是的，这显然会溢出容器：

50% + 50% + 1rem > 100%

有关的：