我刚刚开始使用 CSS 网格,它在正确的位置显示正确的框,但像素大小错误???主容器的显示位置约为 1500px
,而不是 1200px
,并且所有行尺寸也都是错误的。
#container {
width: 1200px;
display: grid;
grid-gap: 10px;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 225px 175px 225px 160px;
}
.feature {
grid-row: 1 / 5;
}
.vertical {
grid-row-end: span 2;
}
.im_picture {
background-color: #336;
}
.im_picture img {}
.button {
background-color: #808000;
grid-column: 2 / 4;
}
<div id="container">
<div class="im_picture feature"></div>
<div class="im_picture vertical"></div>
<div class="im_picture"></div>
<div class="im_picture vertical"></div>
<div class="im_picture"></div>
<div class="button">book a session</div>
最佳答案
代码没有问题,这是 Chrome 和 Windows 设置组合的问题
https://superuser.com/questions/1139259/how-to-adjust-ui-scaling-for-chrome
关于html - 为什么这个 CSS 网格以错误的像素尺寸显示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45725625/