Когда мы думаем о макетах, мы часто представляем себе дизайн страницы в целом. Но более мелкие компоненты внутри страницы могут иметь свои собственные, самодостаточные макеты.
В идеале, эти макеты на уровне компонентов должны автоматически подстраиваться под свое положение на странице. Могут возникнуть ситуации, когда вы не знаете, будет ли компонент размещен в основной колонке контента, в боковой панели или и там, и там. Не зная наверняка, где окажется компонент, необходимо убедиться, что он может адаптироваться к своему контейнеру.
Сетка
CSS-сетка используется не только для разметки страниц. Она также хорошо подходит для компонентов, которые в неё входят.
В этом примере псевдоэлементы ::before и ::after создают декоративные линии по обеим сторонам заголовка. Сам заголовок представляет собой контейнер в виде сетки. Отдельные элементы расположены таким образом, что линии всегда заполняют доступное пространство.
h1 {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 1em;
}
h1::before,
h1::after {
content: "";
border-top: 0.1em double black;
align-self: center;
}
Узнайте, как проверять макеты сетки в инструментах разработчика Chrome.
Flexbox
Как следует из названия, flexbox позволяет сделать ваши компоненты гибкими. Вы можете указать, какие элементы в вашем компоненте должны иметь минимальный или максимальный размер, а остальные элементы будут подстраиваться под него.
В этом примере изображение занимает четверть доступного пространства, а текст — остальные три четверти. Но размер изображения никогда не превышает 200 пикселей.
.media {
display: flex;
align-items: center;
gap: 1em;
}
.media-illustration {
flex: 1;
max-inline-size: 200px;
}
.media-content {
flex: 3;
}
Узнайте, как проверять макеты flexbox в инструментах разработчика Chrome.
Запросы контейнеров
Flexbox позволяет проектировать элементы, начиная с содержимого. Вы можете указать параметры элементов (насколько узкими и широкими они должны быть), а браузер сам определит окончательный вариант.
Однако сам компонент не знает своего контекста. Он не знает, используется ли он в основном контенте или в боковой панели. Это может усложнить компоновку компонентов по сравнению с компоновкой страниц. Чтобы иметь возможность применять контекстно-релевантные стили, ваши компоненты должны знать больше, чем просто размер области просмотра, в которой они находятся.
При работе с макетами страниц ширина контейнера известна , поскольку контейнером является область просмотра браузера; медиа-запросы сообщают размеры контейнера на уровне страницы.
Для получения информации о размерах любого контейнера используйте запросы к контейнерам .
Для начала определим, какие элементы выступают в роли контейнеров.
main,
aside {
container-type: inline-size;
}
Это означает, что вам нужно запросить значение по встроенной оси. Для англоязычных документов это горизонтальная ось. Вы будете изменять стили в зависимости от ширины контейнера.
Если компонент находится внутри одного из этих контейнеров, вы можете применять стили аналогично тому, как вы применяете медиа-запросы.
.media-illustration {
max-width: 200px;
margin: auto;
}
@container (min-width: 25em) {
.media {
display: flex;
align-items: center;
gap: 1em;
}
.media-illustration {
flex: 1;
}
.media-content {
flex: 3;
}
}
Если медиаобъект находится внутри контейнера шириной менее 25em , стили flexbox не применяются. Изображение и текст отображаются вертикально.
Однако, если ширина содержащего элемента превышает 25em , изображение и текст отображаются рядом.
С помощью контейнерных запросов вы можете стилизовать компоненты независимо друг от друга. Вы можете писать правила, основанные на ширине содержащего элемента; ширина области просмотра больше не имеет значения.
Объединение запросов
Для разметки страницы можно использовать медиа-запросы, а для компонентов внутри страницы — контейнерные запросы.
Здесь общая структура страницы включает main элемент и aside элемент. Внутри обоих элементов находятся медиаобъекты.
<body>
<main>
<div class="media">…</div>
<div class="media">…</div>
</main>
<aside>
<div class="media">…</div>
</aside>
</body>
Медиа-запрос применяет сеточную компоновку к main и aside элементам, когда ширина области просмотра превышает 45em .
@media (min-width: 45em) {
body {
display: grid;
grid-template-columns: 3fr 1fr;
}
}
Правило запроса контейнера для медиаобъектов остается прежним: горизонтальная компоновка flexbox применяется только в том случае, если содержащий элемент шире 25em .
Контейнерные запросы кардинально меняют представление о микромакетах. Ваши компоненты могут быть самодостаточными и независимыми от размера области просмотра браузера.
Проверьте свое понимание
Проверьте свои знания в области микропланировки.
И сетка, и flexbox полезны для микромакетов?
Ранее вы изучали макромакеты на уровне страницы. Теперь вы знаете о микромакетах на уровне компонентов.
Далее вы углубитесь в самые основы вашего контента и узнаете, как сделать ваши изображения адаптивными. Сначала вы познакомитесь с адаптивной типографикой .