<body>

  <main>

    <section>
      <h1>Block 1</h1>
    </section>

    <section>
      <h1>Block 2</h1>
    </section>

    <section>
      <h1>Block 3</h1>
    </section>

    <section>
      <h1>Block 4</h1>
    </section>

    <section>
      <h1>Block 5</h1>
    </section>

    <section>
      <h1>Block 6</h1>
    </section>

  </main>

</body>
body {
  margin: 20px;
  padding: 0;
  background: #f4f4f4;
  font-family: 'Roboto';
  font-weight: 700;
  * {
    box-sizing: border-box;
  }
}

main {
  max-width: 1280px;
  padding: 50px 0;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

section {
  padding: 20px;
  width: calc(100% / 3 - 16px);
  margin-bottom: 16px;
  border-radius: 4px;
  background: #fff;
  text-align: center;
  box-shadow: 0px 3px 6px rgba(0,0,0,.16);
}

section:nth-child(6n+1) { background: #f44336; }

section:nth-child(6n+2) { background: #9C27B0; }

section:nth-child(6n+3) { background: #2196F3; }

section:nth-child(6n+4) { background: #4CAF50; }

section:nth-child(6n+5) { background: #FF9800; }

section:nth-child(6n+6) { background: #9E9E9E; }
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.