Question

为什么将两个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>

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定义的，出于跟踪大小的目的，由于尚未定义implicit，因此它被认为是grid-template-columns。 p>
因此，第二列的大小由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%

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

1 个答案: