Адаптивная сетка для новостных блоков

Фотографии в блоках имеют одинаковый размер. По причине того, что обычно все добавляют разные по формату картинки — лишнее просто отрезается.

Кнопка "подробнее" всегда находится на одном уровне у всех блоков в строке

Решение основано на css-свойстве display: grid

Пример:

Название новости

Текст статьи или новости

Еще текст статьи или новости

И еще текст статьи или новости, который не умещается на одной строчке

Название новости

Текст статьи или новости

Название новости, которое не умещается в одну строку

Текст статьи или новости

Еще текст статьи или новости

Название новости

Текст статьи или новости

Название новости

Текст статьи или новости

Еще текст статьи или новости

И еще текст статьи или новости

Название новости

Текст статьи или новости

HTML:

CSS:

Стили кнопки "подробнее" взяты из темы: «Оформление кнопок на CSS». При желании можно выбрать другие или использовать свои.

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!