JSFiddle - React, Tailwind, and code Playground

by Luca De Nardi

HTML

<div class="container">
  <img src='https://xieranmaya.github.io/images/cats/stock-photo-147969173.jpg'>
  <img src='https://xieranmaya.github.io/images/cats/photo-103450229.jpg'>
  <img src='https://xieranmaya.github.io/images/cats/stock-photo-123942383.jpg'>
  <img src='https://xieranmaya.github.io/images/cats/stock-photo-71801901.jpg'>
  <img src='https://xieranmaya.github.io/images/cats/stock-photo-148928293.jpg'>
  <img src='https://xieranmaya.github.io/images/cats/stock-photo-21951271.jpg'>
  <img src='https://xieranmaya.github.io/images/cats/stock-photo-21964829.jpg'>
  <img src='https://xieranmaya.github.io/images/cats/stock-photo-75186237.jpg'>
  <img src='https://xieranmaya.github.io/images/cats/stock-photo-65681789.jpg'>
  <img src='https://xieranmaya.github.io/images/cats/stock-photo-145414771.jpg'>
  <img src='https://xieranmaya.github.io/images/cats/stock-photo-135203031.jpg'>
  <img src='https://xieranmaya.github.io/images/cats/stock-photo-7980252.jpg'>
  <img src='https://xieranmaya.github.io/images/cats/stock-photo-70461471.jpg'>
  <img src='https://xieranmaya.github.io/images/cats/stock-photo-146231033.jpg'>
  <img src='https://xieranmaya.github.io/images/cats/stock-photo-34598868.jpg'>
  <img src='https://xieranmaya.github.io/images/cats/stock-photo-143046061.jpg'>
  <img src='https://xieranmaya.github.io/images/cats/stock-photo-79692589.jpg'>
  <img src='https://xieranmaya.github.io/images/cats/stock-photo-138436811.jpg'>
  <img src='https://xieranmaya.github.io/images/cats/stock-photo-142950305.jpg'>
  <img src='https://xieranmaya.github.io/images/cats/stock-photo-31201539.jpg'>
  <img src='https://xieranmaya.github.io/images/cats/stock-photo-83149705.jpg'>
  <img src='https://xieranmaya.github.io/images/cats/stock-photo-147877407.jpg'>
  <img src='https://xieranmaya.github.io/images/cats/stock-photo-7979718.jpg'>
  <img src='https://xieranmaya.github.io/images/cats/stock-photo-22618399.jpg'>
  <img...

CSS

.container {
  display: flex;
  flex-wrap: wrap;
  margin: 2px;
}

JavaScript

$('img').each(function() {
var img = $(this);
img
    .css('flex-grow', img.width() * 100 / img.height())
    .css('flex-basis', img.width() * 240 / img.height() + 'px');
});