This page was translated from English by the community. Learn more and join the MDN Web Docs community.
CSS Grid Layout
CSS Grid Layout отлично подходит для того, чтобы разделить страницу на основные области или определить взаимосвязь размера, позиционирования и уровня между частями контента, состоящего из HTML примитивов.
Как и таблицы (<table>), grid layout позволяет выравнивать элементы в столбцы и строки. Тем не менее, с помощью CSS grid работать с элементами гораздо проще, чем с таблицами. Например, дочерние элементы grid-контейнера могут наслаиваться друг на друга как и другие элементы при помощи CSS.
Базовый пример
В приведённом ниже примере показана сетка состоящая из трёх колонок, в которой минимальная ширина элементов строки установлена в "100px", а максимальная в "auto". Grid-элементы располагаются в сетке линейно.
* {
box-sizing: border-box;
}
.wrapper {
max-width: 940px;
margin: 0 auto;
}
.wrapper > div {
border: 2px solid rgb(233, 171, 88);
border-radius: 5px;
background-color: rgba(233, 171, 88, 0.5);
padding: 1em;
color: #d9480f;
}
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 |