为什么在使用带有百分比的'grid-template-columns”时我的网格会溢出？-css教程-PHP中文网

为什么在使用带有百分比的'grid-template-columns”时我的网格会溢出？

Barbara Streisand

发布： 2024-11-02 12:22:02

原创

649 人浏览过

Why Does My Grid Overflow When Using `grid-template-columns` With Percentages?

网格溢出主体与 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;
}

.left {
  border: 2px solid red;
}

.right {
  border: 2px solid red;
}</code>

登录后复制

<code class="html"><div class='parent'>
  <div class='left'>LEFT</div>
  <div class='right'>RIGHT</div>
</div></code>

登录后复制

通过这些设置，如果位置固定，父级 div 会溢出到 body 的右侧。然而，问题不在于宽度：100%，而在于网格模板。

解决方案：

出现问题是因为网格模板分割了可用的空间分为 40% 和 60%，留出 5px 的网格间隙。这超过了100%。要解决此问题，请改用 fr 单位：

<code class="css">.parent {
  grid-template-columns: 4fr 6fr;
}</code>

登录后复制

通过此更改，列将在考虑 5px 间隙后分割剩余空间。因此，即使位置固定，父 div 也将适合主体。

以上是为什么在使用带有百分比的'grid-template-columns”时我的网格会溢出？的详细内容。更多信息请关注PHP中文网其他相关文章！