CodePen

HTML

            
              <ul class="grid">
	<li><a href="#">1 item</a></li>
	<li><a href="#">2 item</a></li>
	<li><a href="#">3 item</a></li>
	<li><a href="#">4 item</a></li>
	<li><a href="#">5 item</a></li>
	<li><a href="#">6 item</a></li>
	<li><a href="#">7 item</a></li>
	<li><a href="#">8 item</a></li>
	<li><a href="#">9 item</a></li>
	<li><a href="#">10 item</a></li>
	<li><a href="#">11 item</a></li>
	<li><a href="#">12 item</a></li>
</ul>

            
          
!

CSS

            
              .grid {
	margin: 0; 
	padding: 0; 
	list-style: none; 
	border:   1px solid red;  
}
/*width: 100%/number of columns*/
.grid>li { 
	width:33.333%;    
	height: 3em;
}	
.grid>li a {
	display: block;
	padding: 1em;
}

/*only needed once;  X= number of rows::  margin-top: X * row height, (Xn)+li */
.grid>li:nth-child(4n)+li  {margin-top: -12em}
  
/* costumized per column-1; C=current col-1:: ((X*CC)n)+li */ 		
.grid>li:nth-child(4n)~li  {margin-left: 33.333% }

/* costumized per column-1; */  	
.grid>li:nth-child(8n)~li  {margin-left:  66.667%}  

/* for checking edges */   	
li:hover {background:#ccc;} 

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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