grid
Grid LayoutДля сетки нужен контейнер
Для того, чтобы сделать элемент контейнером сетки, достаточно использовать атрибут display, значением которого нужно установить grid
1Сделаем контейнером сетки элемент body
и сразу вставим в него три элемента div
<body>
<div></div>
<div></div>
<div></div>
</body>body {
margin: 0;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 10vh 40vh 40vh 10vh;
}
div {
border: solid 1px darkred;
background: #ffaa0090;
}
Элемент body стал контенером для сетки потому, что мы использовали display: grid
Настройки сетки мы выполнили с помощью двух атрибутов:
- grid-template-columns
- grid-template-rows
Атрибут grid-template-columns позволяет настроить количество ячеек в строке и ширину ячеек сетки ( число и ширина колонок сетки )
Атрибут grid-template-rows позволяет настроить высоту и количество ячеек сетки по вертикали ( число и высота строк сетки )
Новая для вас единица измерения fr позволяет нам настраивать относительные размеры ячеек сетки:
grid-template-columns: 1fr 2fr 1fr означает, что все доступное пространство ( в нашем случае - ширина контейрера body ) будет разбито на 3 секции, причем ширина второй секции будет в два раза больше ширины первой и второй ( которые будут равны )
Обратите внимание, что помещенные в контейнер с сеткой элементы div автоматически заполняют ячейки сетки последовательно: первый элемент занимает первую ячейку сетки, второй - вторую и т.д.
MDN
Всемирная паутина
Пример
Flexbox Froggy
