0

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

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

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

Код jsfiddle.net/h0tw12dL/

введите сюда описание изображения

1 ответ 1

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>

3
  • Хорошая штука грид, но я не увидел существенного отличия от моего кода с флексами
    – Ziora
    30 апр 2021 в 0:19
  • @Ziora, дополнил
    – De.Minov
    30 апр 2021 в 3:17
  • получилось, НО на 920 пикселях не получается сохранить пропорции отступов между блоками и до серой линии. на разрешении до 1000 пикселей я выставил grid-gap: 0em 4em, чтобы хоть немного приблизиться к пропорциям,но... Вот что у меня получилось tempessj.beget.tech и вот как надо figma.com/file/9srXB2Gsy5e7dpmcEmC2or/…
    – Ziora
    1 мая 2021 в 2:11

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.