Как получить одинаковое расстояние между блоками?

Question

Как сделать так, чтобы расстояние между блоками с параметрами (этаж, высота потолков итд) было одинаковым, как в макете? Я пытался сделать так, чтобы при уменьшении экрана расстояние не уменьшалось, но кроме как через calc выставить что-то похожее, что задано на макете- не получилось. Ну может еще какие-то мелкие косяки заметите, буду только рад вашим конструктивным замечаниям.

Макет https://www.figma.com/file/9srXB2Gsy5e7dpmcEmC2or/...

Сам сайт tempessj.beget.tech

Код jsfiddle.net/h0tw12dL/

Answer 1

Для данной сетки я бы советовал использовать Grid Layout:

.grid {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  grid-gap: 2em 3em;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.grid__title,
.grid__des {
  display: block;
}

.grid__title {
  color: gray;
}

.grid__des {
  font-weight: bold;
}

<ul class="grid">
  <li class="grid__item">
    <span class="grid__title">Этаж</span>
    <span class="grid__des">3 из 19</span>
  </li>
  <li class="grid__item">
    <span class="grid__title">Высота</span>
    <span class="grid__des">потолков 3,2 м</span>
  </li>
  <li class="grid__item">
    <span class="grid__title">Отделка</span>
    <span class="grid__des">Предчистовая</span>
  </li>
  <li class="grid__item">
    <span class="grid__title">Общая</span>
    <span class="grid__des">Площадь 32,24 м2</span>
  </li>
  <li class="grid__item">
    <span class="grid__title">Жилая</span>
    <span class="grid__des">Площадь 22,24 м2</span>
  </li>
  <li class="grid__item">
    <span class="grid__title">Площадь</span>
    <span class="grid__des">Кухни 14,24 м2</span>
  </li>
</ul>

А для второго варианта достаточно изменить grid-template-columns: repeat(2, 1fr);

.grid {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  grid-gap: 2em 3em;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.grid__title,
.grid__des {
  display: block;
}

.grid__title {
  color: gray;
}

.grid__des {
  font-weight: bold;
}

<ul class="grid">
  <li class="grid__item">
    <span class="grid__title">Этаж</span>
    <span class="grid__des">3 из 19</span>
  </li>
  <li class="grid__item">
    <span class="grid__title">Высота</span>
    <span class="grid__des">потолков 3,2 м</span>
  </li>
  <li class="grid__item">
    <span class="grid__title">Отделка</span>
    <span class="grid__des">Предчистовая</span>
  </li>
  <li class="grid__item">
    <span class="grid__title">Общая</span>
    <span class="grid__des">Площадь 32,24 м2</span>
  </li>
  <li class="grid__item">
    <span class="grid__title">Жилая</span>
    <span class="grid__des">Площадь 22,24 м2</span>
  </li>
  <li class="grid__item">
    <span class="grid__title">Площадь</span>
    <span class="grid__des">Кухни 14,24 м2</span>
  </li>
</ul>

БЛОГ НА HUSL

Как получить одинаковое расстояние между блоками?

Ответы (1 шт):