Что такое 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: Определяет, как автоматически размещаются эл