Javascript 均匀间隔的瓷砖响应网格-是否可以使用纯css？

我有一个网格，里面有盒子，每个盒子大小都一样，标记也一样

我想做的是让这些框填满整个页面，使它们之间的间隙均匀。其思想是，如果浏览器窗口移动，框项目将重新堆叠

我研究了各种方法，包括使用Bootstrap3中的网格系统，以及

我还研究了如何使用JS插件来实现这一点，比如砖石结构，尽管这似乎有点过分，因为所有的瓷砖尺寸都是一样的

目前，我几乎可以在这里工作：

当前这种方法的唯一问题是，如果浏览器窗口为481，它将只显示两个框，并在右侧留下一个大的空白

当屏幕不够大，无法容纳每行上下一个盒子数量时，所有盒子之间也会出现同样的问题

---

如果纯粹使用

css

就可以实现，或者它必须使用

js

？

尝试添加

文本对齐：居中到
主体
元素，然后更改
浮动：左至
显示：内联块

例如

body {
    box-sizing: border-box;
    height:100%;
    background: #336633;
    text-align: center;
}

.box {
    width: 200px;
    height: 250px;
    background: white;
    display: inline-block;
    margin: 20px;
}

这是最新消息。

body {
    box-sizing: border-box;
    height:100%;
    background: #336633;
    text-align: center;
}

.box {
    width: 200px;
    height: 250px;
    background: white;
    display: inline-block;
    margin: 20px;
}

更新：我还回答了一个类似的问题

希望有帮助。
您可以使用这些框的宽度和边距的相对值。例如
宽度：30%
/
宽度：30vw

.box {
    width: 30vw;
    margin: 1vw;
    height: 250px;
    background: white;
    float: left;
}

您可以使用
flexbox
方法来解决此问题

justify content:如果版面的所有元素周围都需要均匀的空间，则使用
周围的空间

justify content：布局元素之间的空间需要均匀的


正文{
框大小：边框框；
身高：100%；
背景#336633；
}
.包装纸{
显示器：flex；
柔性流：行换行；
证明内容：周围的空间；
}
.盒子{
宽度：200px；
高度：250px；
背景：白色；
浮动：左；
利润率：20px；
}

Flexbox可以做到这一点


我会使用css列。像这样：

article {
          columns: 2 200px;
       column-gap: 4em;
      column-rule: 1px dotted #ddd;
}

如果窗口变小，则列数将减少。这是css-tricks.com的代码笔

如果要填充整个宽度，请选择1。将.box的宽度固定在200px，然后可以居中，或2。你给他们一个灵活的宽度。
这里还有一个解决方案，使用媒体查询，具有灵活的宽度和灵活的边距

body {
    box-sizing: border-box;
    height:100%;
    background: #336633;
}

.box {
    height: 250px;
    background: white;
    float: left;
    /*margin: 20px;*/
    margin: 2%;
    width: 100%;
}

/* 50% - ( 2 * 2% margins ), etc */
@media (min-width: 240px) { .box { width: 46%; } }
@media (min-width: 480px) { .box { width: 29%; } }
@media (min-width: 720px) { .box { width: 21%; } }
@media (min-width: 960px) {     
    /* Now we set margin to 1%, so .box width is 20% - (2 * 1% margins) */
    .box { width: 18%; } 
    .box { margin: 1%; }
} 
@media (min-width: 1200px) { .box { width: 14.666%; } }
@media (min-width: 1440px) { .box { width: 12.285%; } }
@media (min-width: 1680px) { .box { width: 10.5%; } }
@media (min-width: 1920px) { 
    .box { width: 10.111%; }
    .box { margin: 0.5%; }
}

@media (min-width: 2160px) { .box { width: 9%; } }
/* and just go further if you want more columns */

/* media queries if you want fixed margin of 20px on each side
@media (min-width: 240px) { .box { width: calc(50% - 40px); } }
@media (min-width: 480px) { .box { width: calc(33% - 40px); } }
@media (min-width: 720px) { .box { width: calc(25% - 40px); } }
and so on
*/

谢谢，这是一个很好的方法，但我能看到的唯一问题是，在更大的屏幕上，它不能扩展到每行4个以上的框。我尝试了一些方法，但都无法实现。我在这里用您的示例制作了一个JSFIDLE-@sam，您可以根据需要添加任意多的步骤（请参见编辑，最多10列）。当然，这是对的，它停在某个地方。但也有一段时间，我们从更远的距离看更大的屏幕，如果盒子也变大，可能会更好。这将取决于您的用例。