CSS 网格带来不必要的水平滚动条

Question

I was working with this basic css grid layout, where essentially I wanted to create a grid which is 3row (538px 200px 90px) and 4column(repeat(4,1fr)) wide.我正在使用这个基本的 css 网格布局，基本上我想创建一个 3row (538px 200px 90px) 和 4column(repeat(4,1fr)) 宽的网格。 But the moment I define the container (.main) as display: grid, an unnecessary horizontal scroll appears.但是当我将容器 (.main) 定义为 display: grid 时，会出现不必要的水平滚动。 I want to allocate 100% width not more than that , hence I even tried width: 100vw, but that seems to not work either.我想分配不超过 100% 的宽度，因此我什至尝试了宽度：100vw，但这似乎也不起作用。 The horizontal scrollbar seems legit, considering my row heights add up to more than 100vh, but why is there an excess in vertical area?考虑到我的行高加起来超过 100vh，水平滚动条似乎是合法的，但为什么垂直区域有多余的呢？ 1fr 1fr 1fr 1fr should divide the available space between 4 children. 1fr 1fr 1fr 1fr 应该在 4 个孩子之间划分可用空间。

Question 1: Then where is this little excess horizontal area coming from (which is making it necessary for me to scroll)?问题1：那么这个多余的水平区域是从哪里来的（这让我有必要滚动）？ And how do I limit my max-width of grid to 100vw, hence not having this horizontal scrollbar?以及如何将网格的最大宽度限制为 100vw，因此没有这个水平滚动条？

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

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

I put that border to visualize what is going on.我把那个边界可视化正在发生的事情。

Question 2: If I could actually see the grid lines dividing the container into 12 pieces, that would be dope.问题 2：如果我真的能看到将容器分成 12 块的网格线，那就太棒了。 Any way of doing that?有什么办法吗？ Where I could actually visualize what's going on with dotted lines separating each grid item maybe?在哪里我可以真正想象用虚线分隔每个网格项目的情况？

Answer 1

changing width: 100vw to width: 100% should do the trick将width: 100vw更改为width: 100%应该可以解决问题

CSS 网格带来不必要的水平滚动条

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-06-18 19:20:41

CSS 网格带来不必要的水平滚动条

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-06-18 19:20:41

解决方案1
1 已采纳 2020-06-18 19:20:41