Что такое CSS Grid?

CSS Grid Layout — это двумерная система разметки для веб-страниц. Она позволяет располагать элементы в строках и столбцах, предоставляя мощный инструмент для построения сложных, отзывчивых макетов.

Основные концепции:

• Контейнер (Grid Container): Элемент, которому присвоено display: grid или display: inline-grid. Все его непосредственные дочерние элементы становятся элементами сетки.
• Элементы сетки (Grid Items): Непосредственные дочерние элементы контейнера сетки.
• Линии сетки (Grid Lines): Горизонтальные и вертикальные линии, определяющие структуру сетки. Нумеруются, начиная с 1.
• Дорожки сетки (Grid Tracks): Пространство между двумя соседними линиями сетки (строки или столбцы).
• Ячейки сетки (Grid Cells): Пространство между двумя соседними линиями строк и двумя соседними линиями столбцов. Это наименьшая неделимая единица сетки.
• Области сетки (Grid Areas): Прямоугольные области, состоящие из одной или нескольких ячеек сетки.

Ключевые свойства:

Для контейнера:

• display: grid или inline-grid.
• grid-template-columns: Определяет количество и размер столбцов (например, 1fr 1fr auto).
• grid-template-rows: Определяет количество и размер строк.
• gap, row-gap, column-gap: Устанавливает промежутки между дорожками.
• justify-items, align-items, place-items: Выравнивает содержимое внутри ячеек сетки.
• justify-content, align-content, place-content: Выравнивает всю сетку внутри контейнера.
• grid-template-areas: Определяет именованные области сетки.
• grid-auto-columns, grid-auto-rows: Определяет размер неявно созданных дорожек.
• grid-auto-flow: Определяет, как автоматически размещаются элементы.

Для элементов сетки:

• grid-column-start, grid-column-end, grid-column: Определяет, в каких столбцах находится элемент.
• grid-row-start, grid-row-end, grid-row: Определяет, в каких строках находится элемент.
• grid-area: Объединяет свойства grid-row-start, grid-column-start, grid-row-end, grid-column-end или ссылается на именованную область.
• justify-self, align-self, place-self: Выравнивает конкретный элемент внутри его ячейки.

Единица измерения fr (fraction): Представляет собой долю оставшегося пространства в контейнере сетки после того, как были учтены все фиксированные размеры дорожек.

Пример простого layout:

.container {
  display: grid; /* Делаем контейнер сеткой */
  grid-template-columns: 1fr 2fr; /* Две колонки: первая занимает 1 долю, вторая - 2 доли оставшегося места */
  grid-template-rows: auto 100px; /* Две строки: первая подстраивается под контент, вторая имеет фиксированную высоту 100px */
  gap: 10px; /* Промежуток 10px между всеми ячейками */
}

.item {
  background-color: lightblue;
  padding: 20px;
  border: 1px solid blue;
}

.item1 {
  grid-column: 1 / 3; /* Первый элемент занимает обе колонки */
}

Преимущества:

• Мощный инструмент для создания сложных макетов.
• Упрощает разработку отзывчивых дизайнов.
• Отделяет структуру от содержимого.
• Позволяет легко управлять порядком и расположением элементов независимо от их положения в HTML.
• Поддержка как фиксированных, так и гибких размеров дорожек.

CSS Grid идеален для создания макетов страниц в целом, в то время как Flexbox часто лучше подходит для выравнивания и распределения пространства между элементами в одном измерении (строка или столбец).