Html CSS 3列响应网格

我想做一个3列响应网格布局，有很多浮动的

没有分组，但我失败了，不在响应端，因为在我的第一次媒体查询之后，它工作正常，但我无法理解正常的桌面视图。可能是因为在桌面上（低至990px），布局应该是这样的：第一列（左对齐）没有左边距或填充，比第二列（居中对齐）的间距大20px，第三列（右对齐）没有右边距或填充

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> 

我想使用<代码> NTH-CHORE（）/<代码>，但不能找到正确的序列，因为我想每一个元素在中间都需要一个20px的余量，那么它会是这样的：2，5，8，11，14，…，N。

---

经过一番周折后，我开始考虑使用js，但我不想使用js，那么有没有基于css的解决方案呢？

你是第N个孩子，这个想法可能行得通。尝试：

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

---

是的，请稍等，我将编辑这个问题。

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