我有一个网格会引起我不想要的水平滚动条,我已经尝试了一些方法,包括将网格放入其他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;
}
答案 0 :(得分:0)
对于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>