Flexboxレイアウト – 横並び複数行レイアウト

HTML

<div class="wrap">
  <div class="item">
    <img src="pic01.jpg">
    <h2>横並び見出し</h2>
    <p>横並びレイアウトをFlexboxで実装します。</p>
  </div>

  <div class="item">
    <img src="pic02.jpg">
    <h2>横並び見出し</h2>
    <p>横並びレイアウトをFlexboxで実装します。</p>
  </div>

  <div class="item">
    <img src="pic03.jpg">
    <h2>横並び見出し</h2>
    <p>横並びレイアウトをFlexboxで実装します。</p>
  </div>

  <div class="item">
    <img src="pic04.jpg">
    <h2>横並び見出し</h2>
    <p>横並びレイアウトをFlexboxで実装します。</p>
  </div>

  <div class="item">
    <img src="pic05.jpg">
    <h2>横並び見出し</h2>
    <p>横並びレイアウトをFlexboxで実装します。</p>
  </div>

  <div class="item">
    <img src="pic06.jpg">
    <h2>横並び見出し</h2>
    <p>横並びレイアウトをFlexboxで実装します。</p>
  </div>
</div>

CSS

.wrap {
  display: flex;
  flex-wrap: wrap;
}

.item {
  padding: 30px;
  width: 32%;
  background-color: #d6d6d6;
  border-radius: 10px;
}

.item:not(:nth-child(3n+3)) {
  margin-right: 2%;
}

.item:nth-child(n+4) {
  margin-top: 30px;
}