Макромакеты

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

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

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

<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 . Стили будут выглядеть так:

@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. В этом случае, если карточек недостаточно для заполнения последнего ряда, оставшиеся карточки растянутся, чтобы заполнить доступное пространство, а не выстроятся в столбцы. Если вы хотите выровнять строки и столбцы, используйте сетку.

.cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1em;
}
.cards .card {
  flex-basis: 15em;
  flex-grow: 1;
}

Применяя некоторые умные правила во флексбоксе или сетке, можно создавать макеты динамических макросов с минимальным использованием CSS и без каких-либо медиа-запросов. Для вас это меньше работы — вместо этого вы заставляете браузер выполнять вычисления. Чтобы увидеть некоторые примеры современных макетов CSS, которые являются гибкими и не требуют медиа-запросов, посетите 1linelayouts.com .

Проверьте свое понимание

Проверьте свои знания макетов макросов.

Какое предложение лучше всего описывает макеты макросов?

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

Макросы-макеты всегда используют медиа-запросы для адаптации к разным размерам экрана?

ЛОЖЬ
Истинный

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