我正在使用这个基本的css网格布局，本质上我想创建一个3行(538px 200px 90px(和4列(repeat(4,1fr((宽的网格。 但是当我将容器(.main(定义为显示：网格时，出现了不必要的水平滚动。我想分配 100% 的宽度不超过这个数字，因此我什至尝试了宽度：100vw，但这似乎也不起作用。考虑到我的行高加起来超过 100vh，水平滚动条似乎是合法的，但为什么垂直面积过多？1fr 1fr 1fr 1fr 应在 4 个孩子之间分配可用空间。
问题1：那么这个多余的水平区域从哪里来(这使得我有必要滚动(？我如何将网格的最大宽度限制为 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块的网格线，那将是兴奋剂。有什么办法可以做到这一点吗？也许我在哪里可以想象用虚线分隔每个网格项发生了什么？
将width: 100vw更改为width: 100%应该可以解决问题