Загрузка...
Можете не поверить, но чтобы создать полностью адаптивную CSS-сетку в 3 колонки, как на картинке выше, достаточно знать только 3 CSS-свойства.
Начнем с HTML-макета. Здесь будут контейнер и несколько div внутри него: шапка (header), подвал (footer) и 3 колонки для статей:
<div class="container">
<div class="header">ШАПКА</div>
<div class="art first">СТАТЬЯ 1</div>
<div class="art second">СТАТЬЯ 2</div>
<div class="art third">СТАТЬЯ 3</div>
<div class="footer">ПОДВАЛ</div>
</div>Сперва, надо настроить CSS-grid контейнер и оставить небольшое расстояние между ячейками:
.container {
display: grid;
grid-gap: 10px;
}Самая важная часть состоит в представлении реальной сетки. Если поместить этот макет в Excell-таблицу, он выглядел бы так:
Это можно перевести в CSS с помощью свойства grid-template-area:
.container {
grid-template-areas:
"h h h"
"a1 a2 a3"
"f f f";
display: grid;
grid-gap: 10px;
}А затем, чтобы разместить HTML-элементы в соответствующей ячейке CSS-сетки, можно использовать свойство grid-area:
.header { grid-area: h; }
.art.first { grid-area: a1; }
.art.second { grid-area: a2; }
.art.third { grid-area: a3; }
.footer { grid-area: f; }Делаем CSS-сетку адаптивной
Чтобы сделать разметку отзывчивой, нужно просто изменить макет таблицы:
Тут на помощь приходит медиа-запрос и снова свойство grid-template-areas:
@media only screen and (max-width: 600px) {
.container {
grid-template-areas:
"h"
"a1"
"a2"
"a3"
"f";
}
}Стоит заметить, что можно было бы использовать display: block, но идея состоит в том, чтобы показать, насколько гибкими и полезными могут быть grid-template-areas для управления конфигурациями макета.
И это все! Всего 3 CSS-свойства (grid-area, grid-gap и grid-template-area) понадобилось для создания полностью адаптивного макета с помощью CSS-grid.