CSS网格布局间隙框大小

Question

我有一个CSS网格占据了100％的宽度和100％的窗口高度（body元素有display: grid;）。网格具有行和列模板以及占用其分配空间100％的元素。但是，当我向网格添加grid-gap时，它会使网格对于窗口来说太大，从而强制滚动条出现。如何阻止grid-gap添加到网格的维度 - 类似于box-sizing: border-box;如何阻止填充添加到元素的维度？相反，我希望间隙缩小网格的单元格。

感谢。

Answer 1

使用“fr”时，它可以正常工作。

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

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;
        }
    }
}

Answer 2

就像你在本演示中看到的那样使用{sample: 9}和填充一样。高度设置为100vh，您可以看到，如果您删除或添加box-sizing: border-box没有滚动条，您只需要从正文中删除边距。

grid-gap

body {
  margin: 0;
}
.grid {
  display: grid;
  height: 100vh;
  grid-gap: 20px;
  background: #FF7D7D;
  grid-template-columns: 1fr 2fr;
}
.grid > div {
  background: black;
  color: white;
}
div.a, div.d {
  color: black;
  background: white;
}

Answer 3

您可以使用视口设备：

• let url = consumer.getAuthorizeUrl({ redirect_uri: '/callback', scope: 'r_basicprofile w_share', response_type: 'code' }); （窗口宽度的1％）
• vw（窗口高度的1％）

＆＃13;

＆＃13;

vh

＆＃13;

* {
  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;
}

＆＃13;

＆＃13;

＆＃13;