Как правильно сделать плитки для главной страницы?

Question

[Юра]

Привет, правильно сделать плитки для главной страницы? Как определять высоту всей плитки и высоту блоков для заголовка и превью?

Изначально скажу что текст превью под плиткой обрезаю с помощью line-height:25px; max-height:calc(25px * 3); как мне кажется это максимально удобно, чем с помощью обрезки по количеству символов, так как при любом разрешении в тексте превью всегда 3 строки.

Но вопрос в другом, для каждой страницы длина заголовка разная и в зависимости от его длинны в плитке он выводится по разному или в одно строку или в две потому плитка по высоте увеличивается.

Если делать фиксированную высоту расчитанную на разные заголовки и использовать overflow:hidden, то в принципе вроде смотрится нормально.

НО при сужении экрана, заголовок "давит на текст" и нижняя строка текста некрасиво обрезается, если использовать авто высоту, то блоки распадаются, так как становятся разной длинны,

Похожая картинка, самому ещё нечего показать: https://yadi.sk/i/FY4prVgm3KiEBB

Comments

[Сергей Собко]

Ваш код загрузите на jsFiddle. Так, что бы он отображал суть проблемы. Без этого вам вряд ли кто станет помогать.

Answer 1

[Ankhena]

Используйте flexbox.
Альтернатива - считать высоту на js.

НО при сужении экрана, заголовок "давит на текст"

При сужении экрана используйте media условия и перестраивайте блоки.

Больше - только с вашим кодом на jsfiddle.net

Comments

[Юра]

Да, всего лишь навсего в свойства контейнера добавить display:flex; flex-wrap:wrap; и все плитки с заголовками и превью выстраиваются по порядку.