В каких направлениях одновременно может работать Grid

Grid позволяет одновременно управлять элементами в двух направлениях: по строкам (row axis) и по колонкам (column axis). Это его ключевое отличие от Flexbox, который работает только в одном направлении.

Пример:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px auto;
  gap: 20px;
}

В этом примере мы одновременно:

1. Задаем 2 колонки равной ширины
2. Устанавливаем первую строку высотой 100px, вторую - автоматической
3. Добавляем промежутки между элементами

Grid также позволяет выравнивать содержимое одновременно по вертикали (align-items) и горизонтали (justify-items), создавать сложные макеты с помощью grid-areas и управлять размещением элементов в обоих направлениях через grid-column/grid-row.