CSS Grid Arrangement？

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

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

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

1. 创建更多div
2. 使方块的宽度高于25％

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