Skip to content

Шпаргалка по макетам CSS Grid

На этой странице представлена визуальная шпаргалка по макетам CSS Grid, включая основные свойства контейнеров сетки и элементов сетки, а также практические примеры верстки.

Контейнер сетки (Grid Container)

Свойство Значение Описание
display grid Определяет элемент как контейнер сетки
grid-template-columns 100px 1fr Определяет ширину столбцов
grid-template-rows 100px 1fr Определяет высоту строк
grid-template-areas header header
sidebar main
footer footer		 Определяет сетку путем именования областей
grid-column-gap 10px Определяет отступ между столбцами
grid-row-gap 10px Определяет отступ между строками
grid-gap 10px 20px Одновременно определяет отступы между строками и столбцами
justify-items start Выравнивает элементы сетки по горизонтали внутри ячеек сетки
align-items start Выравнивает элементы сетки по вертикали внутри ячеек сетки
justify-content start Выравнивает всю сетку по горизонтали внутри контейнера сетки
align-content start Выравнивает всю сетку по вертикали внутри контейнера сетки

Элементы сетки (Grid Items)

Свойство Значение Описание
grid-column 1 / 3 Определяет столбцы, которые занимает элемент
grid-row 1 / 3 Определяет строки, которые занимает элемент
grid-area header Размещает элементы сетки по именованным областям
justify-self start Выравнивает отдельный элемент сетки по горизонтали внутри его ячейки
align-self start Выравнивает отдельный элемент сетки по вертикали внутри его ячейки
grid-column-start 1 Определяет начальную линию столбца
grid-column-end 3 Определяет конечную линию столбца
grid-row-start 1 Определяет начальную линию строки
grid-row-end 3 Определяет конечную линию строки

Пример медиа-запроса 

@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
  }
}

Другие примеры

Двухколоночный макет 

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

Трехколоночный макет 

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Вертикальное центрирование 

.container {
  display: grid;
  align-items: center;
}

Горизонтальное центрирование 

.container {
  display: grid;
  justify-items: center;
}