Untitled

dabblet.css

ul { margin:0;padding:0; }

.list ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
}
.list li {
  width: 100px;
  list-style:none;
  background-color: #0a0;
}

.list li img {
  display: block;
}

dabblet.html

<div class="list">
<ul>
<li><img src="http://dummyimage.com/100x120"> text1 <br> text 1-1  text 1-2  text 1-3
<li><img src="http://dummyimage.com/100x160"> text2
<li><img src="http://dummyimage.com/100x100"> text3
<li><img src="http://dummyimage.com/100x120"> text4
<li><img src="http://dummyimage.com/100x100"> text5
<li><img src="http://dummyimage.com/100x140"> text6
<li><img src="http://dummyimage.com/100x100"> text7
<li><img src="http://dummyimage.com/100x120"> text8
</ul>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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