CSS Grid Layout — это мощная система макетов в CSS, предназначенная для создания двумерных раскладок (по строкам и столбцам). В отличие от Flexbox, который работает в одном измерении, Grid позволяет точно контролировать расположение элементов как по горизонтали, так и по вертикали.
Основные понятия
- Grid Container (контейнер) - элемент, к которому применяется display: grid
- Grid Items (элементы) - прямые потомки grid-контейнера
- Grid Lines (линии) - разделительные линии, образующие структуру сетки
- Grid Tracks (направляющие сетки) - пространство между двумя соседними линиями (строки или столбцы)
- Grid Cells (ячейки) - отдельная ячейка сетки
- Grid Areas (области) - прямоугольная область, состоящая из одной или нескольких ячеек