Перейти к содержанию

Макроразметка

Макроразметка описывает более крупную, в масштабах всей страницы, организацию интерфейса.

Каркас макета с двумя колонками, рядом тот же макет с одной колонкой для узкого обзора.

Перед применением любого макета необходимо убедиться в том, что поток содержимого имеет смысл. На небольших экранах по умолчанию используется одноколоночная верстка.

1
2
3
4
5
6
7
8
<body>
    <header>…</header>
    <main>
        <article>…</article>
        <aside>…</aside>
    </main>
    <footer>…</footer>
</body>

При расположении этих отдельных компонентов на уровне страницы создается макроразметка - высокоуровневый вид страницы. Используя медиазапросы, можно задать в CSS правила, описывающие, как это представление должно адаптироваться к различным размерам экрана.

Grid

CSS grid - это отличный инструмент для применения макета на странице. В приведенном выше примере, скажем, требуется двухколоночная верстка при достаточной ширине экрана. Чтобы применить эту двухколоночную верстку, когда браузер станет достаточно широким, используйте медиазапрос для определения стилей сетки выше указанной точки разрыва.

1
2
3
4
5
6
@media (min-width: 45em) {
    main {
        display: grid;
        grid-template-columns: 2fr 1fr;
    }
}

Хотя логичнее было бы указать min-inline-size вместо min-width, логические свойства пока не работают в медиазапросах.

Flexbox

Для данного конкретного макета можно также использовать flexbox. Стили будут выглядеть следующим образом:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
@media (min-width: 45em) {
    main {
        display: flex;
        flex-direction: row;
    }

    main article {
        flex: 2;
    }

    main aside {
        flex: 1;
    }
}

Однако версия flexbox требует больше CSS. Каждый столбец имеет отдельное правило, описывающее, сколько места он должен занимать. В примере с сеткой эта же информация заключена в одно правило для содержащего элемента.

Нужен ли вам медиазапрос?

Возможно, не всегда нужно использовать медиазапрос. Медиазапросы хорошо работают, когда изменения вносятся в несколько элементов, но если макет нужно обновлять часто, то медиазапросы могут выйти из-под контроля из-за большого количества точек останова.

Скажем, у вас есть страница, заполненная компонентами карточек. Карточки никогда не бывают шире 15em, и вы хотите разместить на одной строке столько карточек, сколько поместится. Можно написать медиа-запросы с точками разрыва 30em, 45em, 60em и т.д., но это довольно утомительно и сложно в обслуживании.

Вместо этого можно применить правила, чтобы карточки сами автоматически занимали нужное пространство.

1
2
3
4
5
6
7
8
.cards {
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(15em, 1fr)
    );
    grid-gap: 1em;
}

Аналогичного расположения можно добиться с помощью flexbox. В этом случае, если не хватает карточек для заполнения последнего ряда, оставшиеся карточки растягиваются, заполняя свободное пространство, а не выстраиваются в столбцы. Если необходимо выстроить строки и столбцы, то используйте сетку.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
.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.

Теперь, когда у вас есть несколько идей по макроразметке на уровне страницы, обратите внимание на компоненты внутри страницы. Это сфера micro layouts.

Комментарии