瓷砖均匀分布的响应网格-是否可以使用纯css

Question

我有一个网格，里面有框，每个框的大小和标记都相同。

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

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

我也考虑过使用JS插件来实现这一点，比如Masonry，尽管它会起作用，但似乎有点过头了，因为所有的瓷砖尺寸都是一样的。

现在我几乎在这里工作了：http://jsfiddle.net/3xshcn7p/

这种当前方法的唯一问题是，如果浏览器窗口<719px，但>481，它将只显示其中的2个框，并在右手边留下一个大空格。

当屏幕不够大，无法容纳每行的下一个框数时，所有框之间都会出现相同的问题。

如果这完全可以使用css实现，或者必须使用js，有什么想法吗？

Answer 1

您可以对解决方案使用flexbox方法。

如果布局的所有元素周围需要偶数空间，则使用justify-content: space-around。

布局的元素之间的偶数空间需要justify-content: space-between。

body {
  box-sizing: border-box;
  height: 100%;
  background: #336633;
}
.wrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}
.box {
  width: 200px;
  height: 250px;
  background: white;
  float: left;
  margin: 20px;
}

<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<!--wrapper-->

Answer 2

尝试将text-align: center;添加到body元素，然后将float: left;更改为display: inline-block;。

例如

body {
    box-sizing: border-box;
    height:100%;
    background: #336633;
    text-align: center;
}
.box {
    width: 200px;
    height: 250px;
    background: white;
    display: inline-block;
    margin: 20px;
}

这是JsFiddle链接

更新：我也回答了类似的问题。使用CSS/JQUERY/HTML 的中心多反应潜水

希望能有所帮助。

Answer 3

Flexbox可以做到这一点，

Jsfidle演示

body {
    box-sizing: border-box;
    height:100%;
    background: #336633;
}
.wrapper {
    display:flex;
    flex-direction:row;
    justify-content:space-around;
    flex-wrap: wrap;
}
.box {
    width: 200px;
    height: 250px;
    background: white;
    margin: 20px;
}

Answer 4

如果要填充整个宽度，则为1。你把.box的宽度固定在200像素，然后你就可以居中，或者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
*/

Answer 5

您可以使用这些框的宽度和边距的相对值。例如width: 30%/width: 30vw;。

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

http://jsfiddle.net/3xshcn7p/3/

Answer 6

我会使用css列。像这样：

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

如果窗口变小，列数就会减少。这是css-tricks.com的CodePen

http://codepen.io/katydecorah/pen/0cef950304c03248935b3b821e8b7cec