JSFiddle - React, Tailwind, and code Playground

by Alexey Lisovy

HTML

<div class="wrapper">
<div class="box">
  <div class="inner">
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, dolore recusandae necessitatibus ducimus exercitationem quas, est harum voluptate. Expedita modi in nisi aperiam, nam reiciendis asperiores soluta illum nulla itaque perspiciatis, facere repellendus dignissimos quibusdam quaerat perferendis quo vero. Aliquid autem itaque, eveniet impedit nisi, corporis quae voluptatum consequuntur dolorem.
    </div>
  </div>
</div>
<div class="box">
  <div class="inner">
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, dolore recusandae necessitatibus ducimus exercitationem quas, est harum voluptate. Expedita modi in nisi aperiam, nam reiciendis asperiores soluta illum nulla itaque perspiciatis, facere repellendus dignissimos quibusdam quaerat perferendis quo vero. Aliquid autem itaque, eveniet impedit nisi, corporis quae voluptatum consequuntur dolorem.
    </div>
  </div>
</div>
<div class="box">
  <div class="inner">
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, dolore recusandae necessitatibus ducimus exercitationem quas, est harum voluptate. Expedita modi in nisi aperiam, nam reiciendis asperiores soluta illum nulla itaque perspiciatis, facere repellendus dignissimos quibusdam quaerat perferendis quo vero. Aliquid autem itaque, eveniet impedit nisi, corporis quae voluptatum consequuntur dolorem.
    </div>
  </div>
</div>
<div class="box">
  <div class="inner">
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, dolore recusandae necessitatibus ducimus exercitationem quas, est harum voluptate. Expedita modi in nisi aperiam, nam reiciendis asperiores soluta illum nulla itaque perspiciatis, facere repellendus dignissimos quibusdam quaerat perferendis quo vero. Aliquid autem itaque, eveniet impedit nisi, corporis quae voluptatum consequuntur...

CSS

.wrapper
  {
  margin: 16px;
  padding: 2%; /*общая рамка для всех квадратов(прямоугольников). она может быть как адаптивной, то есть указанной в процентах(и соответственно её размер меняется в заивисимости от ширины окна), так и иметь конкретную величину. Нужно помнить что если мы указываем величину определённой размерности, то этой же размерности должна быть величина и внутренней рамки каждого квадрата (марджин бокса) и удвоенная рамка, которую мы отнимаем, когда считаем ширину каждого квадрата*/
  font-size: 0;
  background: #cbf;  
  }
.box {
  font-size: 36px;  
  width: calc(100% / 4 - 4%);/*100% мы делим на то число, которое мы хотим чтоб столько квадратов (либо прямоугольников) размещалось на строчке. % который мы отнимаем должен быть равен удовоенной величине рамки каждого квадрата, поскольку рамка у каждого квадрата с обеих сторон. численно это либо общий паддинг обёртки, либо марджин вложенных боксов - без разницы, поскольку эти величины должны быть равны, иначе не будет одинаковых отступов*/
  margin: 2%;  /*рамка каждого квадрата (или прямоугольника). получается что от квадрата, лежащего рядом с границей отступ равен величине его собственной рамки, плюс величина общей рамки. а отступ между квадратами равен сумме величин их собственных рамок. Так как рамки у квадратов равны, то отступ равен удвоенной величине рамки каждого квадрата. а поскольку общую рамку мы делаем той же толщины, что и рамка каждого квадрата, то расстояния до края также будет равна удвоенной величине рамки квадрата. Получается у нас все отступы равны*/
  display: inline-block;
}
.inner {
  position: relative;
  height: 0;
  padding-top: 100%; /*отсчитывается от размеров родителя. при этом 100% означает равенство высоты ширине - квадрат. мы можем задать значение больше 100% у нас прямоугольник вытянется, или меньше 100% - прямоугольник сожмётся*/
}
.content {
  position: absolute; /*позиционирование идёт относительно края элемента включая паддинги*/
  top: 0;
  left: 0;
  bottom: 0;
...