CSS Grid Layout
CSS Grid Layout отлично подходит для того, чтобы разделить страницу на основные области или определить взаимосвязь размера, позиционирования и уровня между частями контента, состоящего из HTML примитивов.
Как и таблицы (<table>), grid layout позволяет выравнивать элементы в столбцы и строки. Тем не менее, с помощью CSS grid работать с элементами гораздо проще, чем с таблицами. Например, дочерние элементы grid-контейнера могут наслаиваться друг на друга как и другие элементы при помощи CSS.
Базовый пример
В приведённом ниже примере показана сетка состоящая из трёх колонок, в которой минимальная ширина элементов строки установлена в "100px", а максимальная в "auto". Grid-элементы располагаются в сетке линейно.
HTML
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>
CSS
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-column: 1;
grid-row: 2 / 5;
}
.four {
grid-column: 3;
grid-row: 3;
}
.five {
grid-column: 2;
grid-row: 4;
}
.six {
grid-column: 3;
grid-row: 4;
}
Ссылки
CSS-свойства
grid-template-columns
grid-template-rows
grid-template-areas
grid-template
grid-auto-columns
(en-US)grid-auto-rows
(en-US)grid-auto-flow
grid
grid-row-start
grid-column-start
(en-US)grid-row-end
(en-US)grid-column-end
(en-US)grid-row
(en-US)grid-column
grid-area
grid-row-gap
(en-US)grid-column-gap
(en-US)grid-gap
(en-US)
CSS функции
Глоссарий
Руководства
- Базовая концепция Grid Layout
- Связь Grid Layout с другими методами компоновки
- Расположение элементов по грид-линиям с помощью CSS Grid
- Шаблон области сетки
- Использование именованных линий
- Авторазмещение в CSS Grid Layout (en-US)
- Выравнивание блока в CSS Grid Layout
- CSS Сетка, логические Значения и Режимы Редактирования
- CSS Grid Layout и доступность (en-US)
- CSS Grid and progressive enhancement (en-US)
- Реализация общих макетов используя CSS Grid (en-US)
- Subgrid
- Masonry Layout (en-US) Экспериментальная возможность
Внешние ресурсы
Спецификации
Specification | Status | Comment |
---|---|---|
CSS Grid Layout Module Level 3 | Редакторский черновик | Adds masonry (en-US). |
CSS Grid Layout Module Level 2 | Рабочий черновик | Added subgrids. |
CSS Grid Layout | Кандидат в рекомендации | Initial definition. |