Что такое CSS Grid?

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

Основные концепции CSS Grid включают:

• Grid Container: Элемент, к которому применяется свойство display: grid или display: inline-grid. descendants этого элемента становятся Grid Items.
• Grid Items: Прямые потомки Grid Container'а.
• Grid Lines: Разделительные линии, образующие сетку. Могут быть названы или иметь числовой индекс.
• Grid Tracks: Пространство между двумя линиями сетки — это либо столбец (column), либо строка (row).
• Grid Cells: Наименьшая единица сетки, образованная пересечением строки и столбца.
• Grid Areas: Прямоугольная область сетки, занимающая одну или несколько ячеек.

Ключевые свойства для работы с CSS Grid включают:

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

• display: grid | inline-grid;
• grid-template-columns: Задает столбцы сетки.
• grid-template-rows: Задает строки сетки.
• grid-template-areas: Задает именованные области сетки.
• gap | row-gap | column-gap: Задает промежутки между ячейками.
• justify-items | align-items | place-items: Выравнивание содержимого внутри ячеек