CSS 网格弹出不必要的水平滚动条

Question

我正在使用这个基本的 css 网格布局，基本上我想创建一个 3 行（538 像素 200 像素 90 像素）和 4 列（重复（4,1fr））宽的网格。但是当我将容器（.main）定义为显示：网格时，出现了不必要的水平滚动。 我想分配 100% 宽度不超过，因此我什至尝试了 width: 100vw，但这似乎也不起作用。考虑到我的行高加起来超过 100vh，水平滚动条似乎是合法的，但为什么垂直区域会多余？ 1fr 1fr 1fr 1fr 应该将可用的 space 分成 4 children。

问题1：那么这个多余的水平区域是从哪里来的（这让我需要滚动）？我如何将我的 max-width 网格限制为 100vw，从而没有这个水平滚动条？

<body>
    <div class="main">
    </div>  
</body>

CSS:

*{
    padding: 0;
    margin: 0;
}

.main{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 538px 200px 90px;
    border: 2px solid red;
    width: 100vw;
}

我放置该边框以可视化正在发生的事情。

问题 2：如果我真的能看到将容器分成 12 块的网格线，那就太棒了。有什么办法吗？我在哪里可以用虚线分隔每个网格项目来实际想象发生了什么？

Answer 1

将 width: 100vw 更改为 width: 100% 应该可以解决问题

CSS 网格弹出不必要的水平滚动条

CSS Grid bringing up unnecessary horizontal scrollbar

html

css

grid

layout

css-grid