Модуль сеточной разметки CSS

Заголовок
Меню
Основной
Правый
Нижний колонтитул

Попробуйте сами

Макет сетки

Модуль сетки CSS (CSS Grid Layout Module) предоставляет систему макета на основе сетки с строками и столбцами, что упрощает веб-дизайн, не требуя использования浮动 и позиционирования.

Поддержка браузеров

Все современные браузеры поддерживают свойства сетки.

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 Attribute

Когда у HTML-элемента display свойство установлено в grid или inline-grid в этом случае он становится контейнером сетки.

Пример

.grid-container {
  display: grid;
}

Попробуйте сами

Пример

.grid-container {
  display: inline-grid;
}

Попробуйте сами

Все прямые подэлементы контейнера сетки автоматически становятся элементами сетки.

Сетевые столбцы (Grid Columns)

Вертикальные линии элементов сетки называются столбцами.

Сетевые строки (Grid Rows)

Горизонтальные линии элементов сетки называются строками.

Межсети (Grid Gaps)

Интервал между каждой строкой и столбцом называется зазором.

Размер зазора можно изменить, используя один из следующих свойств:

  • 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-row-gap и grid-column-gap:

.grid-container {
  display: grid;
  grid-gap: 50px 100px;
}

Попробуйте сами

Пример

grid-gap Свойства также могут использоваться для установки одинакового значения для пробела между строк и столбцов:

.grid-container {
  display: grid;
  grid-gap: 50px;
}

Попробуйте сами

Сетевые линии (Grid Lines)

Линии между колонками называются колонковыми линиями (column lines).

Линии между строками называются строковыми линиями (row lines).

Когда сетевые элементы помещаются в сетевой контейнер, используйте номер строки:

Пример

Поместите сетевой элемент на колонку 1 и завершите его на колонке 3:

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

Попробуйте сами

Пример

Поместите сетевой элемент на строку 1 и завершите его на строке 3:

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

Попробуйте сами