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-gaprow-gapgap
Пример
Свойство column-gap задает интервал между столбцами:
.grid-container {
display: grid;
column-gap: 50px;
}
Пример
Свойство row-gap задает интервал между строк:
.grid-container {
display: grid;
row-gap: 50px;
}
Пример
Свойствоgap является сокращенным свойством для свойств row-gap и column-gap:
.grid-container {
display: grid;
gap: 50px 100px;
}
Пример
Свойство gap, также можно использовать для установки как исходного промежутка, так и промежутка столбца в одном значении:
.grid-container {
display: 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;
}
Все свойства CSS Grid
| Свойство | Описание |
|---|---|
| column-gap | Задает интервал между столбцами |
| gap | Сокращенное свойство для свойств row-gap и olumn-gap |
| grid | Сокращенное свойство для свойств grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns и grid-auto-flow |
| grid-area | Задает либо имя для элемента сетки, либо это свойство является сокращенным свойством для свойств grid-row-start, grid-column-start, grid-row-end, и grid-column-end |
| grid-auto-columns | Задает размер столбца по умолчанию |
| grid-auto-flow | Указывает, как автоматически размещаемые элементы вставляются в сетку |
| grid-auto-rows | Задает размер строки по умолчанию |
| grid-column | Сокращенное свойство для свойств grid-column-start и grid-column-end |
| grid-column-end | Указывает, где должен заканчиваться элемент сетки |
| grid-column-gap | Задает размер промежутка между столбцами |
| grid-column-start | Указывает, с чего начинать элемент сетки |
| grid-gap | Сокращенное свойство для свойств grid-row-gap и grid-column-gap |
| grid-row | Сокращенное свойство для свойств grid-row-start и grid-row-end |
| grid-row-end | Указывает, где должен заканчиваться элемент сетки |
| grid-row-gap | Задает размер промежутка между строками |
| grid-row-start | Указывает, с чего начинать элемент сетки |
| grid-template | Сокращенное свойство для свойств grid-template-rows, grid-template-columns и grid-areas |
| grid-template-areas | Указывает, как отображать столбцы и строки, используя именованные элементы таблицы |
| grid-template-columns | Определяет размер столбцов и количество столбцов в макете сетки |
| grid-template-rows | Задает размер строк в макете сетки |
| row-gap | Задает интервал между строками сетки |