CSS Grid
Тема дорожной карты · Frontend разработчик
CSS Grid — это двухмерная система компоновки CSS3, позволяющая frontend-разработчикам создавать сложные адаптивные макеты, размещая элементы в строках и столбцах, определённых на контейнере. Задание display: grid на контейнере открывает доступ к свойствам grid-template-columns, grid-template-rows, grid-template-areas и gap для построения каркаса макета, а дочерние элементы используют grid-column, grid-row и grid-area для позиционирования внутри сетки. CSS Grid превосходно справляется с задачами компоновки на уровне страницы — многоколоночными статьями, дашбордами, галереями карточек, — которые потребовали бы глубоко вложенных Flexbox-контейнеров или ненадёжных float-хаков в старом CSS. Современные возможности CSS Grid — repeat(), minmax(), единица fr и ключевые слова auto-fill/auto-fit — позволяют без усилий создавать адаптивные сетки без медиазапросов; CSS Grid полностью поддерживается во всех современных браузерах и является готовым к продакшну инструментом в арсенале любого frontend-разработчика.
Как это работает
CSS Grid стилизует DOM через селекторы (какие элементы), свойства (что менять), каскад (правила приоритета + наследования: inline > id > class > tag, !important перебивает всё). Layout-движки: normal flow, flexbox (1D), grid (2D), float (legacy). Box model: content + padding + border + margin. Современные фичи: custom properties (--var), @layer, container queries, :has(). Specificity + каскад — главный источник багов "почему не применяется?".
Когда применять
Flexbox — для 1D-раскладок (ряд или колонка элементов); Grid — для 2D-раскладок (ряды + колонки). Custom properties — для темизации + консистентности (--primary-color: #007aff). @layer — для организации specificity в больших проектах. Tailwind/UnoCSS или ванильный CSS — на вкус команды; оба работают; важна консистентность. Mobile-first media queries (min-width: не max-width:) композируются лучше.
Типичные ошибки
Ловушки CSS Grid: !important повсюду ("фикс, который всегда работает" — пока два !important не столкнутся, и исходный баг возвращается умноженным); pixel-perfect раскладки ломаются на другом шрифте/размере (используйте em/rem для типографии); войны z-index, когда реальный фикс — рефакторинг stacking context; стили в JS inline (lock-in, нет темизации). Прочтите MDN про каскад один раз.