CSS Grid Layout
CSS Grid Layout отлично подходит для того, чтобы разделить страницу на основные области или определить взаимосвязь размера, позиционирования и уровня между частями контента, состоящего из HTML примитивов.
Как и таблицы (<table>), grid layout позволяет выравнивать элементы в столбцы и строки. Тем не менее, с помощью CSS grid работать с элементами гораздо проще, чем с таблицами. Например, дочерние элементы grid-контейнера могут наслаиваться друг на друга как и другие элементы при помощи CSS.
Базовый пример
В приведённом ниже примере показана сетка состоящая из трёх колонок, в которой минимальная ширина элементов строки установлена в "100px", а максимальная в "auto". 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>
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-свойства
CSS функции
Глоссарий
Руководства
- Базовая концепция Grid Layout
- Связь Grid Layout с другими методами компоновки
- Расположение элементов по грид-линиям с помощью CSS Grid
- Шаблон области сетки
- Использование именованных линий
- Авторазмещение в CSS Grid Layout
- Выравнивание блока в CSS Grid Layout
- CSS Сетка, логические Значения и Режимы Редактирования
- CSS Grid Layout и доступность
- CSS Grid and progressive enhancement
- Реализация общих макетов используя CSS Grid
- Subgrid
- Masonry Layout Экспериментальная возможность
Внешние ресурсы
Спецификации
Specification |
---|
CSS Grid Layout Module Level 2 |