The first commented line is your dabblet’s title

dabblet.css

/**
 * The first commented line is your dabblet’s title
 */


/* Sort box layout and allow more freedom with box model */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

body {
	background-color:#000;
}

/* Set the amount of columns you want and the column gap (gutter width) */
section {
    -webkit-column-count: 3;
    -webkit-column-gap: 0px; 
    -webkit-column-fill: auto;
    -moz-column-count: 3;
    -moz-column-gap: 0px; 
    -moz-column-fill: auto;
    column-count: 3;
    column-gap: 0px; 
    column-fill: auto;
    line-height:0;
}

/* Now set the column items not to break inside. Notice that I've set them as inline-block elements. 
This is simply added to make it a bit more compatible with firefox */
article {
    padding:0px;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    width:100%;
    margin:0px;
    display:inline-block;
    overflow:hidden;
}

img {
      /* Just in case there are inline attributes */
    width: 100% !important;
    height: auto !important;  
}

p {
	padding: 7vw 5vw 7vw 5vw;
	color:#fff;
	background-color:#606;
	font-size:1.5vw;
	line-height:1.3;
	margin:0px;
}

dabblet.html

<section>

	<article>
<a href="#"><img src="http://www.oassf.com/en/media/images/drawings-taylor-swift.jpg" /><a />
	</article>
	<article>
<a href="#"><img src="http://1.bp.blogspot.com/-Az5LPYfWta0/TjYrL6qLiRI/AAAAAAAAAsM/EOz1Kqrpi-I/s1600/Celebrity+Drawing11.jpg" /><a />
	</article>
	<article>
<a href="#"><img src="http://1.bp.blogspot.com/-Az5LPYfWta0/TjYrL6qLiRI/AAAAAAAAAsM/EOz1Kqrpi-I/s1600/Celebrity+Drawing11.jpg" /><a />
	</article>
	<article>
<a href="#"><img src="http://1.bp.blogspot.com/-Az5LPYfWta0/TjYrL6qLiRI/AAAAAAAAAsM/EOz1Kqrpi-I/s1600/Celebrity+Drawing11.jpg" /><a />
	</article>
	<article>
	   <a href="#"><p>Etiam id massa at purus gravida dictum. Vivamus odio dui, 
           ultricies non semper id, porttitor sit amet turpis.</p><a />
	</article>
	<article>
<a href="#"><img src="http://cathriley.com/innards/tGallery/imageFeed.php?pictureFolder=forSale&picture=drawing-no-10.jpg" /><a />
	</article>
	<article>
           <p>Proin rutrum euismod ante ac molestie. Morbi nisl est, ullamcorper at 
           volutpat ut, pulvinar in nunc. Suspendisse fringilla, risus sit amet 
           facilisis tincidunt, mauris nisl viverra justo, sit amet volutpat neque 
           risus et metus.</p>
	</article>
	<article>
<a href="#"><img src="http://1.bp.blogspot.com/-Az5LPYfWta0/TjYrL6qLiRI/AAAAAAAAAsM/EOz1Kqrpi-I/s1600/Celebrity+Drawing11.jpg" /><a />
	</article>
	<article>
<a href="#"><img src="http://idrawgirls.com/images/2011Q4/drawing-lips.jpg" /><a />
	</article>
	<article>
<a href="#"><img src="http://1.bp.blogspot.com/-Az5LPYfWta0/TjYrL6qLiRI/AAAAAAAAAsM/EOz1Kqrpi-I/s1600/Celebrity+Drawing11.jpg" /><a />
	</article>

</section>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"90","seethrough":"","prefixfree":"1","page":"all"}