JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

flexbox image/thumb gallery

<div class='flex spread'>

<div class='cell'><div class='thumb'><img src="http://placehold.it/800x800"></div><div class="desc">Add a description of the image here</div></div>

<div class='cell'><div class='thumb'><img src="http://placehold.it/800x200"></div><div class="desc">Add a description of the image here</div></div>

<div class='cell'><div class='thumb'><img src="http://placehold.it/200x800"></div><div class="desc">Add a description of the image here</div></div>

<div class='cell'><div class='thumb'><img src="http://placehold.it/400x900"></div><div class="desc">Add a description of the image here</div></div>

<div class='cell'><div class='thumb'><div class='text'>text...</div></div><div class="desc">Add a description of the image here</div></div>

<div class='cell'><div class='thumb'><div class='text'>text...</div></div><div class="desc">Add a description of the image here</div></div>

</div>

CSS

* {box-sizing:border-box;}
.flex {display:flex;flex-flow:row wrap;}
.spread {justify-content:space-between;align-items:space-between;}

.full {width:100%;} .half {width:50%;} .third {width:33.33%;}
.quarter {width:100%;}

.pic {height:150px;max-width:100%;background-color:gold;}
.desc {padding:5px;text-align:center;}


.thumb {height:150px;width:100%;overflow:hidden;position:relative;}
.thumb img {position:absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
.text {border:1px solid red;padding:5px;max-height:150px;overflow:auto;;}

.cell {border:1px dotted grey;border-radius:10px;margin: 0.5rem;text-align:center;}
.cell img { display: block;}


@media screen and (max-width: 700px) {
  .cell {width: calc(50% - 1rem);}
  .pic {max-height:200px;}
}
@media screen and (max-width: 500px) {
  .cell {width: 100%;}
  .pic {max-height:200px;}
}

@media screen and (min-width: 700px) {
  .cell {width: calc(33.3333% - 1rem);}
}

@media screen and (min-width: 1000px) {
  .cell {width: calc(25% - 1rem);}
}