在容器的每一侧创建一个4x4响应的正方形网格，边距为20px？

Question

我想在整个容器的左侧和右侧创建一个响应式 4x4正方形网格，边距恰好为20px。此外，这将有效地消除每行中第一个方块上的左边距，并且还消除了每行中最后一个方格上的右边距，因为双边距不是“＃”。需要。

  

绿色表示每边20px的边距。

到目前为止，我创建了百分比的正方形网格，但问题在于，由于我在每个正方形的所有边都应用了边距，因此这种方法不保证左右边距（在容器上） ）每个20px。

小提琴：http://jsfiddle.net/p9qdhfub/1/

HTML

<section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</section>

CSS

div {
    background: #000;
    float: left;
    height: 24vw;
    margin: 1%;
    width: 23%;
}

问题

我如何能够使用容器（即section）创建一个4x4响应方块网格，其中margin-left为20px，margin-right为20px？

Answer 1

您只需添加

即可

section{
    margin:-1%;
    padding:20px;
}

<强> DEMO

这样，您可以在容器的每一侧安装20px固定水槽。要删除水平滚动条，您可以添加具有overflow:hidden;

的其他容器

<强> DEMO

＆＃13;

＆＃13;

html,
body {
  margin: 0;
}
.w {
  overflow: hidden;
}
section {
  margin: -1%;
  padding: 20px;
}
section div {
  background: #000;
  float: left;
  height: 24vw;
  margin: 1%;
  width: 23%;
}

＆＃13;

<div class="w">
  <section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </section>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

<强> jsfiddle demo

部分总是有20px的保证金;
每个第一个（+4）DIV的左边距为0;
每四个DIV的右边距为0;

div {
    background: #000;
    float: left;
    height: 24vw;
    margin: 1%;
    width: 23.5%;
}
div:nth-child(4n-3){
    background:red;
    margin-left:0; /* or use 20px */
}
div:nth-child(4n){
    background:blue;
    margin-right:0; /* or use 20px */
}
section{
    margin:0 20px; /* so you don't need this any more */
}