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

html
    {
      font-size: 12px;  /*размер шрифтов по-умолчанию. К этому значению можно вернуться в любом потомке, а также поставить нужный коэффициент, что позволяет задавать размер шрифты в любом месте документа относительно шрифта корневого элемента. По-умолчанию, в браузере обычно стоит 16px.*/  
      }
.wrapper
  {
  margin: 16px;
  padding: .75%; /*общая рамка для всех квадратов(прямоугольников). она может быть как адаптивной, то есть указанной в процентах(и соответственно её размер меняется в заивисимости от ширины окна), так и иметь конкретную величину. Нужно помнить что если мы указываем величину определённой размерности, то этой же размерности должна быть величина и внутренней рамки каждого квадрата (марджин бокса) и удвоенная рамка, которую мы отнимаем, когда считаем ширину каждого квадрата*/
  font-size: 0;    /*Обнуляем шрифтовые отступы*/
  background: #cbf;  
  }
.box {
  font-size: 3rem;  /*Задаём потомку шрифт относительно корневого элемента. Можно задать размер шрифта и в пикселях, но в этом случае, если мы решим масштабировать шрифты в документе, нам придётся задавать новый размер в ручную, а в нашем случае, размер пересчитается автоматически*/
  width: calc(100% / 4 - 1.5%);/*100% мы делим на то число, которое мы хотим чтоб столько квадратов (либо прямоугольников) размещалось на строчке. % который мы отнимаем должен быть равен удовоенной величине рамки каждого квадрата, поскольку рамка у каждого квадрата с обеих сторон. численно это либо общий паддинг обёртки, либо марджин вложенных боксов - без разницы, поскольку эти величины должны быть равны, иначе не будет одинаковых отступов*/
  margin: .75%;  /*рамка каждого квадрата (или прямоугольника). получается что от квадрата, лежащего рядом с границей отступ равен величине его собственной рамки, плюс величина общей рамки. а отступ между квадратами равен сумме величин их собственных рамок. Так как рамки у квадратов равны, то отступ равен удвоенной величине рамки каждого квадрата. а поскольку...