CSS Gridlines

dabblet.css

/**
 * CSS Gridlines
 */
 
 body {
 	background-color: #000;
 }

ul {
	margin: 0 auto;
	padding: 0;
	
	width: 600px;
	
	/* Number of columns in the grid */
	-webkit-columns: 3;
    -moz-columns: 3;
    columns: 3;
    
    /* Add vertical borders between each column */
    -webkit-column-rule: 1px solid #fff;
    -moz-column-rule: 1px solid #fff;
    column-rule: 1px solid #fff;
    
    /* Remove the gap so the border lines touch */
    -webkit-column-gap: 0;
    -moz-column-gap: 0;
    column-gap: 0;
}

li {
	/* Center everything inside each item */
	text-align: center;
	
	/* Add a bottom border to each item */
	border-bottom: 1px solid #fff;
}

/* This should be the expected number of items in each 
column since it removes the border from the last on in
each column. */
li:nth-child(3n) {
	border-bottom: none;
}

dabblet.html

<ul>
	<li><img src="http://placeskull.com/170/170" /></li>
	<li><img src="http://placeskull.com/170/170" /></li>
	<li><img src="http://placeskull.com/170/170" /></li>
	
	<li><img src="http://placeskull.com/170/170" /></li>
	<li><img src="http://placeskull.com/170/170" /></li>
	<li><img src="http://placeskull.com/170/170" /></li>
	
	<li><img src="http://placeskull.com/170/170" /></li>
	<li><img src="http://placeskull.com/170/170" /></li>
	<li><img src="http://placeskull.com/170/170" /></li>
</ul>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}