Совместное использование Flexbox и Grid
Используйте Grid для макета страницы на высоком уровне, а Flexbox — для выравнивания внутри компонентов, понимая, в каких случаях подходит каждый инструмент.
«Совместное использование Flexbox и Grid» — бесплатный урок Frontend Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.
Дополняющие друг друга инструменты
Flexbox и Grid не соперники — они созданы для совместной работы. Типичный шаблон: используйте CSS Grid для общей структуры страницы, а затем Flexbox внутри каждой области сетки, чтобы расположить содержимое компонента.
Макет страницы с Grid, компоненты с Flex
Задайте общую структуру страницы с помощью Grid. Внутри каждой области сетки используйте Flexbox для расположения элементов компонента: ссылок навигации в ряд, содержимого карточки — в столбец.
/* Page skeleton */
body {
display: grid;
grid-template-areas: 'header' 'main' 'footer';
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
/* Component inside grid area */
header {
display: flex;
justify-content: space-between;
align-items: center;
}Шаблон сетки карточек
Классический шаблон: Grid для расположения карточек, Flex для внутренней структуры каждой карточки. Это позволяет выровнять карточки в сетке, а их содержимое (изображение, заголовок, основной текст и нижний колонтитул) правильно расположить вертикально.
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.card {
display: flex;
flex-direction: column;
border-radius: 8px;
overflow: hidden;
}
.card-body { flex: 1; } /* push footer down */Шаблон панели навигации
Распространённая панель навигации сочетает оба инструмента. Сама панель является flex-контейнером для логотипа и ссылок. Раздел со ссылками может быть ещё одним flex-контейнером. Для многоколоночного мегаменю можно использовать Grid.
Макет «Святой Грааль»
Макет «Святой Грааль» (заголовок, центральная область из трёх столбцов и нижний колонтитул) сегодня легко создать с помощью Grid. Три столбца — левая боковая панель, основное содержимое и правая боковая панель — являются столбцами Grid; содержимое каждого из них организуется с помощью Flexbox.
.page {
display: grid;
grid-template:
'header header header' auto
'left main right' 1fr
'footer footer footer' auto
/ 200px 1fr 200px;
min-height: 100vh;
}Центрирование чего угодно — Grid или Flex
И Grid, и Flexbox могут идеально центрировать содержимое. Grid: place-items: center (сокращённая запись для align-items и justify-items). Flex: justify-content: center; align-items: center.
.center-grid {
display: grid;
place-items: center; /* centers both axes */
min-height: 100vh;
}
.center-flex {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}Адаптивный макет с боковой панелью
Мобильные устройства: один столбец (навигация сверху). Планшеты и более крупные экраны: боковая панель и содержимое рядом. Grid позволяет декларативно описать это — измените template-areas в медиазапросе.
Шаблон «значок + текст»
Очень распространённый небольшой макет: значок рядом с текстом. Flexbox идеально подходит для него, поскольку это одна строка с выравниванием.
.alert {
display: flex;
align-items: flex-start;
gap: 12px;
}
.alert-icon { flex-shrink: 0; width: 20px; }
.alert-body { flex: 1; }Когда выбрать один из инструментов
Выбирайте Grid, когда мыслите строками И столбцами, когда элементы должны выравниваться по общим дорожкам и когда создаёте структуру страницы. Выбирайте Flex, когда мыслите в одном направлении, когда элементы должны уменьшаться и увеличиваться и когда располагаете ряд кнопок или стопку элементов.
Не усложняйте без необходимости
Иногда простой блочный элемент с max-width и margin: auto лучше сложной сетки. Не каждому макету нужен Grid. Используйте самый простой инструмент, который решает задачу.
Отладка проблем с макетом
В DevTools нажмите на значки grid или flex на панели Elements, чтобы наложить линии сетки или контуры flex-элементов. Это делает невидимую структуру макета видимой и незаменимо при поиске причин неправильного выравнивания.
Быстрая проверка
Какое сочетание инструментов макета чаще всего используют соответственно для структуры страницы и внутренней структуры компонентов?
Повторение: сочетание Grid и Flex
Grid и Flexbox дополняют друг друга. Используйте Grid для двумерной структуры страницы. Используйте Flexbox для одномерной внутренней структуры компонентов. place-items: center в Grid центрирует всё содержимое. flex-direction: column вместе с flex: 1 в теле карточки прижимает нижние колонтитулы карточек к низу. Выполняйте отладку с помощью значков наложения в DevTools.
Часто задаваемые вопросы
Урок «Совместное использование Flexbox и Grid» бесплатный?
Да — полный текст урока «Совместное использование Flexbox и Grid» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.
Чему я научусь в уроке «Совместное использование Flexbox и Grid»?
Используйте Grid для макета страницы на высоком уровне, а Flexbox — для выравнивания внутри компонентов, понимая, в каких случаях подходит каждый инструмент. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Frontend Academy?
Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Совместное использование Flexbox и Grid»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Frontend Academy?
Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Глубокое изучение Flexbox: выравнивание, перенос и порядок
- CSS Grid: template-areas, auto-fit и minmax
- Совместное использование Flexbox и Grid
- Переменные CSS для темизации