html - CSS 3列响应式网格

我想做一个三列的响应式网格布局，其中有很多浮动的<div>，没有分组，但是我失败了，而不是响应式的，因为在我进行第一个媒体查询后，它可以正常工作，但是我不能t确定正常的桌面视图。可能是因为在台式机（低至990像素）上，布局应如下所示：第一个col（左对齐），其左边距或空白距第二个col（对齐的中心）比第二个col（对齐的中心）间隔20 px，第二个col之后又比第三个col（对齐）右边），没有右边距或填充。

html看起来像这样：

<div class="container">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
</div>

CSS：

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.container {
  max-width: 904px;
  margin: 0 auto;
  overflow: hidden;
}

.item {
  width: 288px;
  float: left;
}

@media screen and (max-width: 960px) {
  .container {
    width:98%;
   }

  .item {
    width: 50%;
    padding: 1% 4%;
    margin: 0;
  }
}
@media screen and (max-width: 600px) {
  .item {
    width: auto;
    padding 1% 4%;
    margin: 0;
   }
}

我当时在考虑使用nth-child()，但找不到正确的顺序，因为假设我要在中间的每个元素上留出20px的空白，那么它将是这样的：2,5,8,11,14， ..，n
过了一会儿，我正在考虑Masonry js，但是我不想使用js，那么有没有基于CSS的解决方案？

最佳答案

您的想法可能行不通。尝试：

.item:nth-child(3n+2)
{
    background-color:#f00;
}

关于html - CSS 3列响应式网格，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26049373/