Давно использую CSS Grid, но недавно открыл для себя несколько продвинутых техник, которые очень упрощают создание сложных макетов. Вот мощная техника для адаптивной сетки без медиа-запросов:.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }Эта строчка автоматически создает столько колонок шириной не менее 250px, сколько поместится, и равномерно распределяет доступное пространство. Для более сложных макетов можно использовать именованные области и линии:.dashboard { display: grid; grid-template-areas: "header header header" "sidebar main main" "sidebar stats widgets" "footer footer footer"; grid-template-columns: 220px 1fr 1fr; grid-template-rows: auto 1fr auto auto; min-height: 100vh; gap: 16px; } .header { grid-area: header; } .sidebar { grid-area: sidebar; } .main { grid-area: main; } .stats { grid-area: stats; } .widgets { grid-area: widgets; } .footer { grid-area: footer; } Особенно полезен новый subgrid, который передает настройки сетки вложенным элементам: css.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .card { display: grid; grid-template-rows: auto 1fr auto; / Включаем subgrid для строк / grid-template-rows: subgrid; / Устанавливаем, сколько строк занимает карточка / grid-row: span 3; } Ключевые преимущества современного Grid: — minmax() для гибких размеров — auto-fill/auto-fit для автоматического расчета колонок — Именованные области и линии для сложных макетов — Subgrid для согласованности вложенных сеток Эти техники позволяют создавать сложные адаптивные макеты с минимальным количеством кода! Подписывайся на @frontendino