Задать вопрос
@skuvaWeb
html

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

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

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

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

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

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

5c2771304d569115607093.png

Как вы решаете подобную проблему? Хотелось бы, чтобы у заголовков была одинаковая высота, но кроме как через js не могу представить как это сделать
  • Вопрос задан
  • 94 просмотра
2 комментария
Подписаться 1 Простой 2 комментария
Решения вопроса 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
@tyzberd
https://codepen.io/tyzberd/pen/EGwdqX?editors=1100
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Wagtail(Django)
23 апр. 2024, в 16:55
10000 руб./за проект
Специалист по работе с данными MySQL
23 апр. 2024, в 16:10
1500 руб./в час
Разработать модуль для flutter приложения
23 апр. 2024, в 16:05
3000 руб./за проект
Ещё заказы