CSS Grid without inline-block

dabblet.css

/**
 * CSS Grid without inline-block 
 */
 
ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 420px;
}

li {
	float: left;
	width: 120px;
	margin: 0 10px;
}

li:nth-child(3n+1) {
	clear: left;

dabblet.html

<ul>
	<li>
		<img src="http://placekitten.com/120/90">
		<p>Text caption</p>
	</li>
	<li>		<img src="http://placekitten.com/120/90">
		<p>A larger than usual text caption on this one</p>
	</li>
	<li>		<img src="http://placekitten.com/120/90">
		<p>Text caption</p>
	</li>
	<li>		<img src="http://placekitten.com/120/90">
		<p>Another larger than usual text caption on this one</p>
	</li>
	<li>		<img src="http://placekitten.com/120/90">
		<p>Text caption</p>
	</li>
	<li>		<img src="http://placekitten.com/120/90">
		<p>Text caption</p>
	</li>
	<li>		<img src="http://placekitten.com/120/90">
		<p>Text caption</p>
	</li>
	<li>		<img src="http://placekitten.com/120/90">
		<p>Text caption</p>
	</li>
	<li>		<img src="http://placekitten.com/120/90">		<p>Text caption</p>
	</li>
<ul>

settings.json

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