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>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
</ul>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              // Set the number of rows you want
$rows: 4; 
$baseline: 10px;
$width: 4em;
$height: 4em;
$margin: 0.4em;

html {
  font-size: $baseline;    
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-weight: bold;
  text-align: center;
}

body { overflow-x: hidden; }

ul {
  list-style: none;
}
 
li {
  width: $width;
  height: $height;
  margin: $margin;
  margin-left: 0;
  float: left;
  background: #004f8c;
  background: hsl(200, 100%, 50%);
  line-height: $height;
  color: white;
  font-size: 2.5em;
} 

li:hover {
  opacity: 0.5;
}

$i: $rows; 
@while $i > 1 {
  li:nth-child(#{$rows}n+#{$i}) {
    $j: $i - 1;
    margin-top: $j * $height + $i * $margin;
    margin-left: -($width + $margin);
    background: hsl(200+30*$i, 100%, 50%);
  }
  $i: $i - 1;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              // Sass way to float: down;
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................