CSS Сетка - введение
Заголовок
Меню
Главная
Справа
Подвал
Сетка макета
Модуль CSS - Сетка макета предлагает систему компоновки на основе сетки, со строками и колонками, что упрощает проектирование веб-страниц без использования поплавков и позиционирования.
Поддержка браузеров
Свойства сетки поддерживаются во всех современных браузерах.
| 57.0 | 16.0 | 52.0 | 10 | 44 |
Элементы сетки
Макет сетки состоит из родительского элемента с одним или несколькими дочерними элементами.
Пример
<div
class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
1
2
3
4
5
6
7
8
9
Свойство display
HTML элемент становится контейнером сетки, устанавливая свойство
display для значений grid
или inline-grid.
Все прямые потомки контейнера сетки автоматически становятся пунктом сетки.
Столбцы сетки
Вертикальная линия элементов сетки называется столбцы.
Строки сетки
Горизонтальная линия элементов сетки называется строки.
Разрывы сетки
Пространство между каждым столбцом/строкой называется разрыв.
Размер зазора можно настроить с помощью одного из следующих свойств:
grid-column-gap
grid-row-gap
grid-gap
Пример
Свойство grid-column-gap задает зазор между столбцами:
.grid-container {
display: grid;
grid-column-gap: 50px;
}
Пример
Свойство grid-row-gap задает промежуток между строками:
.grid-container {
display: grid;
grid-row-gap: 50px;
}
Пример
Свойство grid-gap является сокращенным для свойств
grid-column-gap и grid-row-gap:
.grid-container {
display: grid;
grid-gap: 50px 100px;
}
Пример
Свойство grid-gap также может использоваться для установки как разрыва строки,
так и разрыва столбца в одном значении:
.grid-container {
display: grid;
grid-gap: 50px;
}
Линия сетки
Линии между столбцами называются линия сетки.
Линии между строками называются линия строки.
См. номера строк при размещении элемента сетки в контейнере сетки:
Пример
Поместите элемент сетки в строку столбца 1, и пусть он заканчивается на строке столбца 3:
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
Пример
Поместите элемент сетки в строку 1, и пусть он заканчивается на строке 3:
.item1 {
grid-row-start: 1;
grid-row-end: 3;
}
