<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.