我有一个网格导致我不想要一个水平滚动条，我已经尝试了一些方法，包括将网格放入其他div中。这是css中的网格代码。
.page-grid {
display: grid;
grid-template-rows: auto auto;
grid-template-columns: 60% 40%;
grid-template-areas:
"ONE TWO"
"THREE THREE"
;
align-items: center;
justify-content: center;
text-align: center;
grid-gap: 20px;
margin-top: 70px;
background: White;
max-width:100%;
box-sizing: border-box;
}
有了grid-template-columns: 60% 40%你已经说，整个宽度应该使用。添加grid-gap: 20px将其进一步扩展，从而导致水平滚动条。
相反，你可以写 grid-template-columns: 3fr 2fr
fr代表小数，除不引起所需的额外像素外，效果基本相同。它将自动调整所有网格间距。
.fractions {
display: grid;
grid-template-columns: 3fr 2fr;
grid-gap: 20px;
margin-bottom: 30px;
}
.grid-element {
height: 80px;
background: #00ff00;
}<div class="fractions">
<div class="grid-element"></div>
<div class="grid-element"></div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句