JSFiddle - React, Tailwind, and code Playground

by Mike Jacobson

HTML

<div class="portfolio">
  <figure class="featured"><img src="http://placekitten.com/200/300">/figure>
  <figure><img src="http://placekitten.com/300/300">/figure>
  <figure><img src="http://placekitten.com/100/50">/figure>
  <figure><img src="http://placekitten.com/50/100">/figure>
  <figure><img src="http://placekitten.com/200/300">/figure>
  <figure class="featured"><img src="http://placekitten.com/20/30">/figure>
  <figure><img src="http://placekitten.com/120/240">/figure>
  <figure><img src="http://placekitten.com/220/300">/figure>
  <figure><img src="http://placekitten.com/130/50">/figure>
  
</div>

CSS

.portfolio {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 1em;
}

.portfolio > figure {
  margin: 0;
}

.portfolio img {
  max-width: 100%;
}