为什么将 `grid-template-columns` 设置为 100% 时我的网格容器会溢出？

为什么 Grid-Template-Columns 中 100% 的网格显示会溢出正文宽度

使用 CSS 网格时，了解其影响非常重要将 grid-template-columns 属性设置为 100% 及其与父容器位置的关系。让我们深入研究这个问题及其解决方案。

考虑以下代码片段：

<code class="css">.parent {
  position: fixed;
  width: 100%;
  left: 0;
  top: 14px;
  display: grid;
  grid-template-columns: 40% 60%;
  grid-gap: 5px;
  background: #eee;
}</code>

使用此设置，您可能会遇到父容器超出右侧视口的问题位置设置为固定时的一侧。这不是由于宽度设置为 100%，而是由于指定的 grid-template-columns 值和 grid-gap 的组合所致。

出现问题是因为 grid-template-columns 属性划分将可用空间分成两列，分别设置为父容器宽度的 40% 和 60%。此外，5px 网格间隙在列之间引入了额外的空间。结果，分配给两列的总空间加上间隙超过了 100%，导致父容器在右侧溢出。

要解决此问题，应避免为网格指定固定百分比列并改为使用 fr 单位。 fr 单位是基于分数的大小调整单位，允许您在考虑指定的宽度和间隙后分配剩余空间。

以下是调整后的代码的示例：

<code class="css">.parent {
  position: fixed;
  width: 100%;
  left: 0;
  top: 14px;
  display: grid;
  grid-template-columns: 4fr 6fr;
  grid-gap: 5px;
  background: #eee;
}</code>

In在修改后的代码中，grid-template-columns 属性设置为 4fr 6fr，表示第一列应为 4 个单位宽，第二列应为 6 个单位宽，剩余空间按比例分配。这可以确保父容器不会溢出其边界，无论其位置如何。

以上是为什么将 `grid-template-columns` 设置为 100% 时我的网格容器会溢出？的详细内容。更多信息请关注PHP中文网其他相关文章！