CSS 网格布局间隙框大小调整

Question

我有一个 CSS 网格，它占据窗口的 100% 宽度和 100% 高度(body 元素有 display: grid;)。网格具有行和列模板和元素，它们占据了 100% 的分配空间。但是，当我向网格添加 grid-gap 时，它会使网格对于窗口来说太大了，迫使滚动条出现。我怎样才能阻止 grid-gap 添加到网格的尺寸 - 类似于 box-sizing: border-box; 如何停止填充添加到尺寸一个元素？相反，我希望间隙缩小网格的单元格。

谢谢。

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