Ответ
Плюсы:
- Двумерная раскладка (работа с колонками и строками одновременно)
- Простое выравнивание элементов (justify/align-items)
- Гибкость (fr, minmax(), auto-fill/fit)
- Меньше хаков по сравнению с Flexbox для сложных макетов
- Нативный контроль пробелов (gap)
Минусы:
- Менее широкая поддержка в старых браузерах (IE11 частично)
- Сложнее для простых одномерных макетов (где хватит Flexbox)
- Требует изучения новых концепций (grid areas, tracks)
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}