在列表CSS中的行项目之间插入空格

由 发布于

In a list, I am trying to insert space of around 10px after 4 / 8 items in a list. I tried adding - .box:nth-child(4n + 1) { padding-top: 10px; } but then it is also adding padding to 1st item(which makes sense in n = 0). Let me know a cleaner way of creating the same effect, as this list is dynamic and items in a list may varies from 1 / 2 / 3 / 4/ 5 / 6/ 7/ 8/ 9. 

* { box-sizing: border-box; }
.container { display: flex; background: #EEEEEE; padding: 10px; }
.list { display: flex; flex-direction: column; width: 100%; }
.list-item { background: #FFFFFF; margin-bottom: 10px; width: 100%; display: flex; flex-wrap: wrap; padding: 20px; }
.box { width: 25%; }
// .box:nth-child(4n + 1) { padding-top: 10px; }
.header {font-weight: bold; }
<div class="container">
  <div class="list">
    <div class="list-item">
      <div class="box">
        <div class="header">Header 1</div>
        <div class="content">Content 1</div>
      </div>
      <div class="box">
        <div class="header">Header 2</div>
        <div class="content">Content 2</div>
      </div>
      <div class="box">
        <div class="header">Header 3</div>
        <div class="content">Content 3</div>
      </div>
      <div class="box">
        <div class="header">Header 4</div>
        <div class="content">Content 4</div>
      </div>
    </div>
    <div class="list-item">
      <div class="box">
        <div class="header">Header 1</div>
        <div class="content">Content 1</div>
      </div>
      <div class="box">
        <div class="header">Header 2</div>
        <div class="content">Content 2</div>
      </div>
      <div class="box">
        <div class="header">Header 3</div>
        <div class="content">Content 3</div>
      </div>
      <div class="box">
        <div class="header">Header 4</div>
        <div class="content">Content 4</div>
      </div>
      <div class="box">
        <div class="header">Header 5</div>
        <div class="content">Content 5</div>
      </div>
    </div>
    <div class="list-item">
      <div class="box">
        <div class="header">Header 1</div>
        <div class="content">Content 1</div>
      </div>
      <div class="box">
        <div class="header">Header 2</div>
        <div class="content">Content 2</div>
      </div>
      <div class="box">
        <div class="header">Header 3</div>
        <div class="content">Content 3</div>
      </div>
      <div class="box">
        <div class="header">Header 4</div>
        <div class="content">Content 4</div>
      </div>
      <div class="box">
        <div class="header">Header 5</div>
        <div class="content">Content 5</div>
      </div>
      <div class="box">
        <div class="header">Header 6</div>
        <div class="content">Content 6</div>
      </div>
    </div>
    <div class="list-item">
      <div class="box">
        <div class="header">Header 1</div>
        <div class="content">Content 1</div>
      </div>
      <div class="box">
        <div class="header">Header 2</div>
        <div class="content">Content 2</div>
      </div>
      <div class="box">
        <div class="header">Header 3</div>
        <div class="content">Content 3</div>
      </div>
      <div class="box">
        <div class="header">Header 4</div>
        <div class="content">Content 4</div>
      </div>
      <div class="box">
        <div class="header">Header 5</div>
        <div class="content">Content 5</div>
      </div>
      <div class="box">
        <div class="header">Header 6</div>
        <div class="content">Content 6</div>
      </div>
      <div class="box">
        <div class="header">Header 7</div>
        <div class="content">Content 7</div>
      </div>
    </div>
    <div class="list-item">
      <div class="box">
        <div class="header">Header 1</div>
        <div class="content">Content 1</div>
      </div>
      <div class="box">
        <div class="header">Header 2</div>
        <div class="content">Content 2</div>
      </div>
      <div class="box">
        <div class="header">Header 3</div>
        <div class="content">Content 3</div>
      </div>
      <div class="box">
        <div class="header">Header 4</div>
        <div class="content">Content 4</div>
      </div>
      <div class="box">
        <div class="header">Header 5</div>
        <div class="content">Content 5</div>
      </div>
      <div class="box">
        <div class="header">Header 6</div>
        <div class="content">Content 6</div>
      </div>
      <div class="box">
        <div class="header">Header 7</div>
        <div class="content">Content 7</div>
      </div>
      <div class="box">
        <div class="header">Header 8</div>
        <div class="content">Content 8</div>
      </div>
    </div>
    <div class="list-item">
      <div class="box">
        <div class="header">Header 1</div>
        <div class="content">Content 1</div>
      </div>
      <div class="box">
        <div class="header">Header 2</div>
        <div class="content">Content 2</div>
      </div>
      <div class="box">
        <div class="header">Header 3</div>
        <div class="content">Content 3</div>
      </div>
      <div class="box">
        <div class="header">Header 4</div>
        <div class="content">Content 4</div>
      </div>
      <div class="box">
        <div class="header">Header 5</div>
        <div class="content">Content 5</div>
      </div>
      <div class="box">
        <div class="header">Header 6</div>
        <div class="content">Content 6</div>
      </div>
      <div class="box">
        <div class="header">Header 7</div>
        <div class="content">Content 7</div>
      </div>
      <div class="box">
        <div class="header">Header 8</div>
        <div class="content">Content 8</div>
      </div>
      <div class="box">
        <div class="header">Header 9</div>
        <div class="content">Content 9</div>
      </div>
    </div>
  </div>
</div>