@skuvaWeb

Проблема с расположением элементов по сетке?

Хотел бы услышать коментарии и предложения по поводу решения следующей проблемы.
Пример на codepen

Имеется стандартная сетка, у блоков есть название. Проблема в том, что если название у одного элемента будет большим, то все начинает выглядеть криво.
5c276f0a846ab293648370.png

У меня есть 2 варианта, и оба на мой взгляд костыльные.

1: Добавлять заголовку свойство min-heigth
5c2770a7e07e0168302869.png

2: Задавать блоку
display: flex;
    flex-direction: column;
    justify-content: space-between;

5c2771304d569115607093.png

Как вы решаете подобную проблему? Хотелось бы, чтобы у заголовков была одинаковая высота, но кроме как через js не могу представить как это сделать
  • Вопрос задан
  • 94 просмотра
Решения вопроса 1
@magarif
Программист
*{
  box-sizing: border-box;
}
.grid{
  display: flex;
  flex-wrap: wrap;
  margin: 0 -20px;
}
.block{
  width: 100%;
  max-width: calc(25% - 40px);
  flex: calc(25% - 40px);
  margin: 0 20px;
  margin-top: 20px;
  border: 1px solid #ccc;
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  &__desc{
    display: flex;
    flex: 1 1 100%;
    flex-direction: column;
  }
  &__title{
    display: block;
    margin-bottom: 10px;
  }
  &__text{
    margin: auto 0 0;
  }
}
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы