CSS网格排列？

Question

是否有使用 CSS 制作此网格的更好方法？

html, body {
margin: 0;
width: 100%;
height: 100%;
}

.grid {
overflow: hidden;
}

.box {
width: 25%;
color: #FFF;
position: relative;
float: left;
}

.box .content {
width: 100%;
padding-bottom: 100%;
background-image: url(http://placekitten.com/g/100/100);
background-repeat: no-repeat;
background-size: contain;
}

JSBin

还有可能使其适合窗口的高度和宽度吗？ ...并删除作为特定尺寸出现的这些烦人的像素宽度间隙:

Answer 1

如果你想要用正方形填充 body ，这是一个很好的方法。

如果你也想填充所有的高度，有几种可能性；目前还不清楚你到底想要什么。但是由于您似乎想要正方形，所以剩下的唯一方法是

1. 创建更多的div
2. 使正方形的宽度高于 25%

像素间隙的发生是因为尺寸演算中存在像素舍入。解决这个问题的最佳方法是将背景大小更改为覆盖(而不是包含)