CodePen

HTML

            
              <ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li> 
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>
            
          
!

CSS

            
              body { padding: 10px; }

ul {
  width: 330px;
  margin: 10px auto;
  list-style: none;
  overflow: hidden;
}

li {
  width: 100px;
  height: 100px;
  margin: 10px 10px 10px 0;
  float: left;
  background: rgb(0,79,140); 
  text-align: center;
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-weight: bold;
  font-size: 30px;
  line-height: 100px;
  color: white;
}

li:hover {
  opacity: 0.5;
}

li:nth-child(3n+2){
  margin: 120px 0 0 -110px;
  background: limegreen;
}

li:nth-child(3n+3) {
  margin: 230px 0 0 -110px;
  background: crimson;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................