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

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

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

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

Пример:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML:

CSS:

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

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

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

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

Комментарии:

    • оооуоыеоые:

      [quote]окыыокеыоеыеокооооооооооооооооооо

      Ответить
  • Сергей:

    Побольше бы таких вещей. Для похожих новостей самое то.

    Ответить
  • Владислав:

    Спасибо, решение классное, мне как раз "что то" подобное и было нужно.
    Ставлю лайк!!!!

    Ответить