我试图在页面大小为100%的元素中居中显示网格,同时在整个网格周围留出空间。我已经尝试过自动页边距,但是网格粘在父页面的顶部。当添加手动边距时,body向下推网格的父元素,充当网格的边距。我还尝试了在父元素中使用另一个div,将网格间隔到一半。有没有办法做这个清洁剂(没有间隔物)?
HTML:
<html>
<body>
<main>
<div class="spacer"></div>
<div class="grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</main>
</body>
</html>
CSS:
html, body {
height: 100%;
width: 100%;
}
main {
height: 100%;
width: 100%;
}
.spacer {
height: 10%;
}
.grid {
display: grid;
height: 80%;
width: 90%;
grid-template: 1fr 2fr 1fr / 1fr 2fr 1fr;
margin: auto;
}
JSFIDDLE:https://jsfiddle.net/593Lovxw/22/
https://stackoverflow.com/questions/50935778
复制相似问题