Макромакеты

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

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

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

<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 .

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

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

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

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

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

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

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