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

【问题标题】：Why the forced horizontal scroll on two 50% CSS grid columns?为什么在两个 50% CSS 网格列上强制水平滚动？
【发布时间】：2019-02-21 18:37:51
【问题描述】：

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

This codepen shows the behavior I'm asking about.

基本上，当网格设置为以下 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>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

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

/* WHY THE HORIZONTAL SCROLL 
   WHEN LINES 21-23 ARE
   UNCOMMENTED?! */

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

.item {
  padding: 2rem;
  border: 2px solid black;
  border-radius: 0.25rem;
}

.p1 {
  padding: .5rem;
}

code {
  padding: .5rem;
  background: gray;
  color: white;
  font-weight: regular;
}

<header class="p1">
  <h1>Why does the horizontal scroll happen when <code>.grid { grid-template-columns: 50% 50%; }</code></h1>
  <p>Uncomment lines 21-23 in the CSS of this codepen to set the above <code>.grid</code> css rule. See this <a href="https://stackoverflow.com/q/52374483/2145103">Stack Overflow post for discussion.</a></p>
</header>
<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

【问题讨论】：

使用 fr 单位：grid-template-columns: 1fr 1fr;我手头没有具体细节，但 AFAIK，fr 是一个“弹性单位”，指的是剩余空间量（折扣填充等）。显然，百分比值没有考虑这些，并且有效尺寸会超出水平客户端尺寸。
类似问题：stackoverflow.com/questions/52113420/…

标签： css layout css-grid

【解决方案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 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，by definition)。
所以第二列只占用剩余空间，这会导致它填满行。没有触发溢出。

您的代码（第 2 版）：

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

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

50% + 50% + 1rem > 100%