|
Гриды — новый модуль ЦСС для создания двумерной раскладки элементов. Он поддерживается всеми основными браузерами, кроме Эджа, в котором реализован старый синтаксис.
Как и флекс, грид состоит из контейнера и дочерних элементов. Контейнер задаёт сетку: количество строк и столбцов, их размеры и расстояния между ними. Дочерним элементам указывается, сколько и где места они должны занять. Например:
<!-- grid.html -->
<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">Six</div>
</div>
/* grid.css */
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
.one {
grid-column: 1 / 3;
grid-row: 1;
}
.two {
grid-column: 2 / 4;
grid-row: 1 / 3;
}
.three {
grid-row: 2 / 5;
grid-column: 1;
}
.four {
grid-column: 3;
grid-row: 3;
}
.five {
grid-column: 2;
grid-row: 4;
}
.six {
grid-column: 3;
grid-row: 4;
}
One
Two
Three
Four
Five
Six
Пример раскладки из документации на сайте MDN. Работает в Хроме 57, Сафари 10.1, Фаерфоксе 52 и выше
|
|
Как обстоят дела с внедрением новых гридов в Эдж, можно узнать в его трекере фич |
|