CSS网格布局间距与盒模型大小

Question

我有一个 CSS 网格布局，它占据了窗口的 100% 宽度和高度 (body 元素的 display: grid;)。该网格布局有行和列模板，其中的元素占据了其分配空间的 100%。但是，当我在网格布局中添加了 grid-gap 后，它会使网格过大以至于出现滚动条。我如何防止 grid-gap 添加到网格的尺寸中 - 就像 box-sizing: border-box; 阻止内边距将元素的尺寸扩大一样？相反，我希望这些间隙缩小网格单元格的大小。

谢谢。

- Freddy Tuxworth

---

请提供您的代码 :) - Chris Happy

Answer 1

当您使用"fr"时，它可以正常工作。

举例：

• HTML:

<section>
    <article class="a">A</article>
    <article class="b">B</article>
    <article class="c">C</article>
    <article class="d">D</article>
</section>

• SCSS：

section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: column;
    grid-gap: 20px;

    border: 10px solid blue;
    
    article {
        background-color: tomato;
        
        &.d {
            grid-column: 2; 
            grid-row-start: 1; 
            grid-row-end: 4;

            background-color: olive;
        }
    }
}

- herrfischer

Answer 2

它的工作方式与您使用 box-sizing: border-box 和填充相同，如您在此演示中所见。高度设置为100vh，如果您删除或添加grid-gap，则没有滚动条，您只需要从 body 中删除 margin 即可。

body {
  margin: 0;
}
.grid {
  display: grid;
  height: 100vh;
  grid-gap: 20px;
  background: #FF7D7D;
  grid-template-columns: 1fr 2fr; /* Use Fractions, don't use % or vw */ 
}
.grid > div {
  background: black;
  color: white;
}
div.a, div.d {
  color: black;
  background: white;
}

<div class="grid">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
  <div class="d">D</div>
</div>

- Nenad Vracar

---

当我使用您的代码中的 fr 单位而不是百分比时，它有效。 - Freddy Tuxworth

我使用vw单位遇到了与OP相同的问题，但仅在Windows Chrome上出现（在Mac Chrome上正常工作）。 在两个平台上都对我很好的是使用fr单位。 - Moby Duck

Answer 3

您可以使用视口单位：

• vw（窗口宽度的1％）
• vh（窗口高度的1％）

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 100%;
}

.first {  height: 40vh;  }
.hori {  height: 10vh;  }
.second {  height: 50vh;  }


div > div {
  float: left;
}

.left {  width: 40vw;  }
.vert {  width: 10vw  }
.right {  width: 50vw;  }

.first .left,
.second .right {
  background: #ccc;
}

.first .right,
.second .left {
  background: #000;
}

<div class="first">
  <div class="left"></div>
  <div class="grid-break vert"></div>
  <div class="right"></div>
</div>

<div class="grid-break hori"></div>

<div class="second">
  <div class="left"></div>
  <div class="grid-break vert"></div>
  <div class="right"></div>
</div>

- Chris Happy