CSS Grid и Flexbox: мастер-класс по современным layouts

От базовых концепций до продвинутых паттернов верстки

CSS Grid и Flexbox революционизировали веб-верстку. Больше не нужны float хаки и clearfix. Современные layouts создаются за минуты, адаптивны по умолчанию и поддерживаются всеми браузерами. Flexbox: одномерные layouts Основная концепция: Flexbox работает в одном измерении — строка ИЛИ колонка. Базовый пример: .container { display: flex; gap: 1rem; } .item { flex: 1; /* Равномерное распределение */ } Главные свойства контейнера: .container { display: flex; /* Направление */ flex-direction: row; /* row | column | row-reverse | column-reverse */ /* Выравнивание по главной оси */ justify-content: space-between; /* flex-start | center | space-between | space-around */ /* Выравнивание по поперечной оси */ align-items: center; /* flex-start | center | stretch | baseline */ /* Перенос элементов */ flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */ /* Gap между элементами */ gap: 1rem; } Свойства элементов: .item { /* Рост, сжатие, базовый размер */ flex: 1 1 auto; /* flex-grow flex-shrink flex-basis */ /* Индивидуальное выравнивание */ align-self: flex-end; /* Порядок */ order: 2; } Практические паттерны Flexbox 1. Navbar: .navbar { display: flex; justify-content: space-between; align-items: center; padding: 1rem; } .nav-links { display: flex; gap: 2rem; list-style: none; } 2. Card layout: .cards { display: flex; flex-wrap: wrap; gap: 2rem; } .card { flex: 1 1 300px; /* Минимум 300px, растет при наличии места */ display: flex; flex-direction: column; } .card-content { flex: 1; /* Занимает оставшееся пространство */ } .card-footer { margin-top: auto; /* Прижат к низу */ } 3. Holy Grail Layout: .page { display: flex; flex-direction: column; min-height: 100vh; } .content { display: flex; flex: 1; } .sidebar { flex: 0 0 250px; } .main { flex: 1; } .aside { flex: 0 0 200px; } CSS Grid: двумерные layouts Основная концепция: Grid работает в двух измерениях одновременно — строки И колонки. Базовый пример: .container { display: grid; grid-template-columns: 1fr 1fr 1fr; /* 3 равные колонки */ gap: 1rem; } Главные свойства контейнера: .container { display: grid; /* Определение колонок */ grid-template-columns: 200px 1fr 200px; /* или */ grid-template-columns: repeat(3, 1fr); /* или */ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Определение строк */ grid-template-rows: auto 1fr auto; /* Gap */ gap: 1rem 2rem; /* row-gap column-gap */ /* Выравнивание */ justify-items: center; /* start | center | end | stretch */ align-items: center; /* Выравнивание всей сетки */ justify-content: center; align-content: center; } Свойства элементов: .item { /* Размещение по колонкам */ grid-column: 1 / 3; /* с 1 по 3 линию */ /* или */ grid-column: span 2; /* занимает 2 колонки */ /* Размещение по строкам */ grid-row: 1 / 4; /* Короткая запись */ grid-area: 1 / 1 / 3 / 3; /* row-start / col-start / row-end / col-end */ } Практические паттерны Grid 1. Dashboard Layout: .dashboard { display: grid; grid-template-columns: 250px 1fr; grid-template-rows: 60px 1fr; grid-template-areas: "sidebar header" "sidebar main"; height: 100vh; gap: 0; } .sidebar { grid-area: sidebar; } .header { grid-area: header; } .main { grid-area: main; } 2. Responsive Gallery: .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; } /* Отдельные элементы могут занимать больше места */ .gallery-item:nth-child(3n) { grid-column: span 2; } 3. Magazine Layout: .magazine { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem; } .hero { grid-column: 1 / -1; /* Вся ширина */ } .article { grid-column: span 8; } .sidebar { grid-column: span 4; } @media (max-width: 768px) { .article, .sidebar { grid-column: 1 / -1; } } Auto-fit vs Auto-fill /* auto-fit: растягивает элементы, если есть место */ .grid-fit { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } /* auto-fill: создает пустые треки */ .grid-fill { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } Grid или Flexbox? Используйте Flexbox когда: Одномерный layout (строка ИЛИ колонка) Content-first дизайн (размер зависит от контента) Небольшие компоненты (navbar, cards) Выравнивание элементов Используйте Grid когда: Двумерный layout (строки И колонки) Layout-first дизайн (фиксированная структура) Сложные layouts (dashboard, magazine) Нужно точное позиционирование Комбинация Grid + Flexbox /* Grid для общей структуры */ .page { display: grid; grid-template-columns: 250px 1fr; grid-template-rows: 60px 1fr; } /* Flexbox для элементов внутри */ .header { display: flex; justify-content: space-between; align-items: center; } .sidebar { display: flex; flex-direction: column; gap: 1rem; } Продвинутые техники 1. Subgrid: .parent { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .child { display: grid; grid-template-columns: subgrid; /* Наследует сетку родителя */ grid-column: span 3; } 2. Named Lines: .grid { display: grid; grid-template-columns: [sidebar-start] 250px [sidebar-end content-start] 1fr [content-end]; } .content { grid-column: content-start / content-end; } 3. Implicit Grid: .grid { display: grid; grid-template-columns: repeat(3, 1fr); /* Автоматические строки */ grid-auto-rows: 200px; /* Направление заполнения */ grid-auto-flow: dense; /* row | column | dense */ } Responsive без media queries Fluid columns: .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 1rem; } /* Автоматически адаптируется под ширину экрана! */ Clamp для размеров: .container { width: clamp(300px, 90%, 1200px); padding: clamp(1rem, 5vw, 3rem); } .heading { font-size: clamp(1.5rem, 4vw, 3rem); } Accessibility Внимание с order: /* НЕ меняйте визуальный порядок для важного контента */ .item:first-child { order: 2; /* Визуально вторым, но в DOM первым */ } /* Screen readers читают DOM порядок, не CSS порядок! */ Focus management: .grid { display: grid; gap: 1rem; } /* Убедитесь, что focus видим */ .grid-item:focus { outline: 2px solid blue; outline-offset: 2px; } Performance Grid и Flexbox fast — не влияют на производительность Избегайте nested grids — если не нужны Используйте contain — для изоляции layout .grid-item { contain: layout style paint; } Browser DevTools Chrome/Firefox DevTools показывают Grid и Flexbox визуально: Grid overlay — показывает линии сетки Flexbox overlay — показывает направление Gap visualization — показывает отступы Заключение: CSS Grid и Flexbox — мощнейшие инструменты современной верстки. Изучите оба, понимайте когда использовать каждый. Комбинируйте их для сложных layouts. Используйте современные техники вроде auto-fit и clamp для responsive дизайна без media queries. Практикуйтесь, создавайте реальные layouts, и вы быстро станете мастером современной CSS верстки.