Когда используют display grid

Grid используется для создания сложных двумерных макетов с точным контролем над строками и столбцами. Подходит, когда нужно:

1. Создать сетку с явными рядами и колонками
2. Управлять выравниванием и распределением пространства
3. Располагать элементы независимо от потока документа

Пример:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-gap: 20px;
}
.item {
  grid-column: 2 / 4;
  grid-row: 1;
}

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

• Двумерное выравнивание (и строки, и колонки)
• Более точное позиционирование элементов
• Возможность наложения элементов