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

Question

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

This codepen shows the behavior I'm asking about.

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

.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>

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 spec似乎没有详细说明 grid-template-columns: none 应该如何应用于显式轨道。但以下是 Chrome、Firefox 和 Edge 正在做的事情:

• 即使第二列是显式的，因为它是由 grid-template-areas 定义的，出于轨道大小的目的，它被认为是 隐式的，因为 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%

---

相关:

• The difference between percentage and fr units in CSS Grid Layout