JSFiddle - React, Tailwind, and code Playground

by FiNGAHOLiC

HTML

<div class="items-container">
  <div class="items">
    <div class="item">
      <div class="img">
        <img src="http://placehold.it/300x300" alt="">
      </div>
      <div class="text">Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vivamus suscipit tortor eget felis porttitor volutpat.</div>
    </div>
    <div class="item">
      <div class="img">
        <img src="http://placehold.it/300x300" alt="">
      </div>
      <div class="text">Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vivamus suscipit tortor eget felis porttitor volutpat.</div>
    </div>
    <div class="item">
      <div class="img">
        <img src="http://placehold.it/300x300" alt="">
      </div>
      <div class="text">Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vivamus suscipit tortor eget felis porttitor volutpat.</div>
    </div>
    <div class="item">
      <div class="img">
        <img src="http://placehold.it/300x300" alt="">
      </div>
      <div class="text">Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vivamus suscipit tortor eget felis porttitor volutpat.</div>
    </div>
    <div class="item">
      <div class="img">
        <img src="http://placehold.it/300x300" alt="">
      </div>
      <div class="text">Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vivamus suscipit tortor eget felis porttitor volutpat.</div>
    </div>
    <div class="item">
      <div class="img">
        <img src="http://placehold.it/300x300" alt="">
      </div>
      <div class="text">Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vivamus suscipit tortor eget felis porttitor volutpat.</div>
    </div>
    <div class="item">
      <div class="img">
        <img src="http://placehold.it/300x300" alt="">
      </div>
      <div class="text">Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vivamus suscipit tortor eget felis porttitor volutpat.</div>
    </div>
    <div class="item">
      <div...

SCSS

$column-count: 4;

$items-width: 100%;

$gap: 5px;
$gap-total: $gap * $column-count * 2;

$item-text-height: 20px;
$item-text-height-2x: $item-text-height * 2;
$item-text-padding: 10px;
$item-text-padding-2x: $item-text-padding * 2;

$item-width: calc((#{$items-width} - #{$gap-total}) / #{$column-count});
$item-width-2x: calc(((#{$items-width} - #{$gap-total}) / #{$column-count}) * 2 + (#{$gap} * 2));

.items-container {
  width: 100%;
}

.items {
  background: blue;
  box-sizing: border-box;
  overflow: hidden;
  padding: $gap;
  width: $items-width;
}

.item {
  background: red;
  float: left;
  margin: $gap;
  width: $item-width;
  .img {
    img {
      height: auto;
      width: 100%;
      vertical-align: top;
    }
  }
  .text {
    font-size: 10px;
    line-height: $item-text-height;
    overflow: hidden;
    padding: $item-text-padding;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.item:nth-child(10n + 1),
.item:nth-child(10n + 8) {
  width: $item-width-2x;
  .text {
    line-height: $item-text-height-2x;
    padding: $item-text-padding-2x;
  }
}

.item:nth-child(10n + 8) {
  float: right;
}

.item:nth-child(10n + 1),
.item:nth-child(10n + 6) {
  clear: both;
}