• Теория
  • Теория

Раскладка простой страницы: блог

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

Как вы уже догадались, блок со статьями, как и промоблок, занимает первые два столбца.

Но, в отличие от промоблока, здесь нам нельзя фиксировать размеры элементов, так как по высоте у нас оба блока, что статьи, что отзывы, не должны быть ограничены. Почему? Правильно, потому что они оба содержат текстовое содержимое, которое может меняться.

Обратите внимание, что у грид-строки с автоматическим размером высота формируется по высоте самого высокого грид-элемента, а остальные грид-элементы, которые тоже располагаются на этой грид-строке — растягиваются на её высоту.

Давайте проконтролируем, как будет растягиваться третий нефиксированный ряд нашего грида, если в разметке появится ещё одна статья блога.

Заметьте, что в grid-template-rows мы ничего не дописали, так как по умолчанию размеры оставшихся рядов задаются автоматически, а нас это пока что устраивает.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Знакомство с гридами» тренажёра «Погружение в техники раскладок» можно после регистрации и оформления подписки.