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

Question

[skuvaWeb]

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

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


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

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


2: Задавать блоку

display: flex;
    flex-direction: column;
    justify-content: space-between;

Как вы решаете подобную проблему? Хотелось бы, чтобы у заголовков была одинаковая высота, но кроме как через js не могу представить как это сделать

Comments

[alex]

в чем заключается кривость? на мой взгляд, то что вы пытаетесь сделать, как раз и выгляит криво

[Ankhena]

Самый ровный вариант ваш первый.
Альтернативный как на втором скрине про min-height, только решать его надо не через мин высоту, а через margin-top: auto для текста и флекса родителю.

Answer 1

[Марат Гарифуллин]

*{
  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;
  }
}

Answer 2

[tyzberd]

https://codepen.io/tyzberd/pen/EGwdqX?editors=1100

Comments

[Вадим Кот]

Аналогичный вариант, но с margin top auto у block__desc https://codepen.io/anon/pen/yGzQPM
flex-grow: 1 для title хорошо, но до тех пор пока у него нету фона, рамок, декоративных элементов и т.д.