Ответ
Плюсы:
- Двумерная раскладка (работа с колонками и строками одновременно)
- Простое выравнивание элементов (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;
}Ответ 18+ 🔞
Да ты посмотри, какие дела творятся в мире вёрстки! Сидишь такой, пытаешься блоки расставить, а они, сука, как попало. Раньше-то всё на флоатах да инлайн-блоках, костыли на костылях, в рот меня чих-пых! А теперь, блядь, Grid CSS подъехал — просто ёперный театр!
С одной стороны, плюсы — овердохуища:
- Двумерная раскладка. Это ж не хухры-мухры! Одной командой и по вертикали, и по горизонтали рулишь. Колонки, строки — всё в одной куче, блядь. Не то что Flexbox, который в одну сторону смотрит.
- Выравнивание — раз плюнуть. Захотел всё по центру —
justify-items: center;, и пошёл пить чай. Никаких этихmargin: 0 auto;, которые сломаются от чиха. - Гибкость пиздец. Есть у тебя эта волшебная единица
fr— свободное место делить. Илиminmax(200px, 1fr)— чтобы не сжималось меньше 200 пикселей, но и лишнее место занимало. Красота! - Меньше диких костылей. Помнишь, как для сложных сеток тридцать обёрток делали? Теперь нихуя, одна грид-область нарисовал — и порядок.
- Пробелы нативно.
gap: 20px;— и всё, блядь! Никаких отрицательных маргинов, которые потом всю логику ломают.
А с другой стороны, минусы тоже имеются, куда ж без них:
- Старые браузеры. IE11, этот пидарас шерстяной, поддерживает Grid по-своему, с приставкой
-ms-. Если нужно его задобрить — придётся попотеть, ёпта. - Для простых задач — overkill. Если тебе просто кнопки в ряд выстроить — Flexbox проще и логичнее. Нечего из пушки по воробьям палить.
- Новые концепции. Тут тебе не
display: block;, тут целая наука: grid-areas, grid-tracks... Нужно голову включить, э, бошка, думай!
Вот смотри, какой лаконичный код для адаптивной сетки:
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}Короче, инструмент — хуй в пальто. Мощный, но и учиться под него нужно. Для сложных, структурных макетов — просто бомба. А для мелочёвки — иногда проще старым добрым Flexbox'ом обойтись. Выбирай по ситуации, а не потому что модно!