为什么网格间隙会导致溢出? [英] Why does grid-gap cause an overflow?

问题描述

为什么在以下代码段中X轴上出现溢出?

Why do I have an overflow on the X axis in the following snippet?

一旦在.body网格容器上应用grid-gap: 10px，就会产生溢出.

The overflow is generated once I apply grid-gap: 10px on my .body grid container.

div:not(.header):not(.body):not(.row) {
  border: 1px solid grey;
}

.header {
  margin-top: 20px;
  display: grid;
  grid-gap: 10px;
  grid-template-areas: "header-left header-right-up" "header-left header-right-down";
  grid-template-rows: 40px 40px;
  grid-template-columns: minmax(50px, 200px) auto;
}

.header-left {
  grid-area: header-left;
}

.header-right-up {
  grid-area: header-right-up;
}

.header-right-down {
  grid-area: header-right-down;
}

.body {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 25% 50% 25%;
  grid-auto-rows: 80px; 
  grid-gap: 10px;
}

.row-left {
}

.row-center {
}

.row-right {
}

<div class="header">
  <div class="header-left">image</div>
  <div class="header-right-up">content</div>
  <div class="header-right-down">long content</div>
</div>

<div class="body">
    <div class="row-left"></div>
    <div class="row-center"></div>
    <div class="row-right"></div>

    <div class="row-left"></div>
    <div class="row-center"></div>
    <div class="row-right"></div>

    <div class="row-left"></div>
    <div class="row-center"></div>
    <div class="row-right"></div>
  </div>
</div>

https://codepen.io/anon/pen/WdJExz?editors=1100

推荐答案

您有一个3列的网格容器(.body):

You have a 3-column grid container (.body):

grid-template-columns: 25% 50% 25%

这些列的总宽度为100％.

The total width of those columns is 100%.

然后在列(和行)之间添加装订线:

You're then adding gutters between the columns (and rows):

grid-gap: 10px

它的缩写:

grid-column-gap: 10px;
grid-row-gap: 10px;

因此，当您将所有宽度加起来时，就会得到:

So when you add up all the widths you get:

25% + 50% + 25% + 10px + 10px

更简单地输入:

100% + 20px > 100%, which results in an overflow condition

(注意:grid-*-gap属性仅适用于网格项目之间，而不适用于项目与容器之间.这就是为什么我们计算两个网格间隙，而不是四个.)

(Note: grid-*-gap properties apply only between grid items – never between items and the container. That's why we calculate two grid gaps, not four.)

作为解决方案，而不是百分比单位，请尝试使用仅适用于可用空间的fr单位.这意味着fr长度是在应用任何grid-gap长度后 之后计算的.

As a solution, instead of percentage units, try using fr units, which apply only to free space. This means that fr lengths are calculated after any grid-gap lengths are applied.

grid-template-columns: 1fr 2fr 1fr

div:not(.header):not(.body):not(.row) {
  border: 1px solid grey;
}

.header {
  margin-top: 20px;
  display: grid;
  grid-gap: 10px;
  grid-template-areas: "header-left header-right-up" "header-left header-right-down";
  grid-template-rows: 40px 40px;
  grid-template-columns: minmax(50px, 200px) auto;
}

.header-left {
  grid-area: header-left;
}

.header-right-up {
  grid-area: header-right-up;
}

.header-right-down {
  grid-area: header-right-down;
}

.body {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* ADJUSTMENT */
  grid-auto-rows: 80px;
  grid-gap: 10px;
}

.row-left {}

.row-center {}

.row-right {}

<div class="header">
  <div class="header-left">image</div>
  <div class="header-right-up">content</div>
  <div class="header-right-down">long content</div>
</div>

<div class="body">
  <div class="row-left"></div>
  <div class="row-center"></div>
  <div class="row-right"></div>

  <div class="row-left"></div>
  <div class="row-center"></div>
  <div class="row-right"></div>

  <div class="row-left"></div>
  <div class="row-center"></div>
  <div class="row-right"></div>
</div>

修订后的Codepen演示

此处有更多详细信息: CSS网格布局中百分比和fr单位之间的区别

More details here: The difference between percentage and fr units in CSS Grid Layout

这篇关于为什么网格间隙会导致溢出?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！