Макро-макеты описывают более широкую, охватывающую всю страницу организацию вашего интерфейса.
Перед применением любого макета убедитесь, что структура контента логична. По умолчанию используется одноколоночный порядок отображения, который будет отображаться на экранах меньшего размера.
<body>
<header>…</header>
<main>
<article>…</article>
<aside>…</aside>
</main>
<footer>…</footer>
</body>
При размещении этих отдельных компонентов на уровне страницы вы проектируете макромакет: высокоуровневое представление вашей страницы. Используя медиа-запросы, вы можете задать правила в CSS, описывающие, как это представление должно адаптироваться к различным размерам экрана.
Сетка
CSS-сетка — отличный инструмент для применения разметки к вашей странице. В предыдущем примере предположим, что вам нужна двухколоночная разметка, когда ширина экрана станет достаточной. Чтобы применить эту двухколоночную разметку, когда ширина браузера станет достаточной, используйте медиа-запрос для определения стилей сетки выше указанного контрольного пункта.
@media (min-width: 45em) {
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
Flexbox
Для этого конкретного макета можно также использовать flexbox . Стили будут выглядеть следующим образом:
@media (min-width: 45em) {
main {
display: flex;
flex-direction: row;
}
main article {
flex: 2;
}
main aside {
flex: 1;
}
}
Однако версия с flexbox требует больше CSS. Для каждого столбца существует отдельное правило, описывающее, сколько места он должен занимать. В примере с сеткой та же информация заключена в одном правиле для содержащего элемента.
Вам нужен запрос от СМИ?
Использование медиазапросов может потребоваться не всегда. Медиазапросы хорошо работают, когда вы вносите изменения в небольшое количество элементов, но если макет нужно часто обновлять, то при большом количестве контрольных точек использование медиазапросов может выйти из-под контроля.
Допустим, у вас есть страница, заполненная карточками. Ширина карточек никогда не превышает 15em , и вы хотите разместить как можно больше карточек в одну строку. Вы могли бы написать медиа-запросы с контрольными точками, например, 30em , 45em и 60em , но это довольно утомительно и сложно поддерживать.
Вместо этого вы можете применить правила, благодаря которым сами карточки будут автоматически занимать нужное количество места.
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
grid-gap: 1em;
}
Аналогичного расположения можно добиться с помощью flexbox. В этом случае, если карточек недостаточно для заполнения последнего ряда, оставшиеся карточки растянутся, чтобы заполнить доступное пространство, вместо того чтобы выстраиваться в столбцы. Если же вы хотите выровнять строки и столбцы, используйте grid.
.cards {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1em;
}
.cards .card {
flex-basis: 15em;
flex-grow: 1;
}
Применяя интеллектуальные правила в flexbox или grid, можно создавать динамические макромакеты с минимальным количеством CSS и без медиа-запросов. Это упрощает вам работу — вычисления выполняет сам браузер. Примеры современных CSS-макетов, которые являются гибкими и не требуют медиа-запросов, можно посмотреть на сайте 1linelayouts.com .
Проверьте свое понимание
Проверьте свои знания о компоновке макросов.
Какое предложение лучше всего описывает компоновку макросов?
Макромакеты всегда используют медиазапросы для адаптации к различным размерам экрана?
Теперь, когда у вас есть несколько идей для макромакетов на уровне страницы, переключите внимание на компоненты внутри страницы. Это область микромакетов .