Układy w trybie makro

Układy makr opisują większy układ interfejsu obejmujący całą stronę.

Szkic układu z 2 kolumnami obok tego samego układu z 1 kolumną w wąskim widoku.

Zanim zastosujesz układ, sprawdź, czy kolejność treści jest logiczna. Mniejsze ekrany wyświetlają się teraz w domyślnej kolejności w jednej kolumnie.

<body>
  <header>…</header>
  <main>
    <article>…</article>
    <aside>…</aside>
  </main>
  <footer>…</footer>
</body>

Gdy rozmieścisz te komponenty na poziomie strony, projektujesz układ makro, czyli ogólny widok strony. Za pomocą zapytań multimedialnych możesz podać w CSS reguły opisujące, jak widok powinien dostosowywać się do różnych rozmiarów ekranu.

Siatka

Siatka CSS to doskonałe narzędzie do stosowania układu na stronie. W przykładzie powyżej załóżmy, że chcesz zastosować układ dwukolumnowy, gdy dostępna jest wystarczająca szerokość ekranu. Aby zastosować to ułożenie z 2 kolumnami, gdy przeglądarka jest wystarczająco szeroka, użyj zapytania o media, aby zdefiniować style siatki powyżej określonego punktu przełamania.

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

Flexbox

W tym przypadku możesz też użyć flexbox. Style będą wyglądać tak:

@media (min-width: 45em) {
  main {
    display: flex;
    flex-direction: row;
  }

  main article {
    flex: 2;
  }

  main aside {
    flex: 1;
  }
}

Wersja flexbox wymaga jednak więcej kodu CSS. Każda kolumna ma osobną regułę określającą, ile miejsca powinna ona zajmować. W przykładzie siatki te same informacje są zapisane w ramach jednej reguły dla elementu zawierającego.

Czy potrzebujesz zapytania dotyczącego mediów?

Nie zawsze trzeba używać zapytania o media. Zapytania o multimedia działają dobrze, gdy wprowadzasz zmiany do kilku elementów, ale jeśli trzeba będzie często aktualizować układ, w zapytaniach o media może panować nadużywanie wielu punktów przerwania.

Załóżmy, że masz stronę pełną komponentów karty. Karty nigdy nie są szersze niż 15em, a chcesz umieścić na jednej linii tyle kart, ile się zmieści. Zapytania o multimedia można tworzyć z punktami przerwania: 30em, 45em, 60em, ale jest to dość pracochłonne i trudne w obsłudze.

Zamiast tego możesz zastosować reguły, aby same karty automatycznie zajmowały odpowiednią ilość miejsca.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
  grid-gap: 1em;
}

Podobny układ można osiągnąć za pomocą Flexbox. W takim przypadku, jeśli nie ma wystarczającej liczby kart, aby wypełnić ostatni wiersz, pozostałe karty zostaną rozciągnięte, aby wypełnić dostępne miejsce, zamiast ustawiać je w kolumnach. Jeśli chcesz wyrównać wiersze i kolumny, użyj siatki.

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

Gdy zastosujesz pewne reguły inteligentne w flexbox lub siatce, możliwe jest projektowanie układów makr dynamicznych z minimalną ilością kodu CSS i bez zapytań o media. To mniej pracy dla Ciebie – obliczenia wykonuje przeglądarka. Przykłady nowoczesnych układów CSS, które są elastyczne i nie wymagają zapytań medialnych, znajdziesz na stronie 1linelayouts.com.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę na temat układów makro.

Które zdanie najlepiej opisuje układ makr?

układy, które zawierają inne układy;
Spróbuj jeszcze raz. Większość układów zawiera inne układy.
Gdy projekt korzysta z Flexbox lub siatki.
Spróbuj jeszcze raz. Ani Flexbox, ani siatka nie mają specyficznych właściwości dla układów makr.
Układy niskiego poziomu obejmujące niewielkie części ekranu.
Spróbuj jeszcze raz.
układy wysokiego poziomu, które obejmują dużą część ekranu;
🎉 Układy makr to podstawowe układy strony, które obejmują duże obszary wizualne i często są dostosowywane za pomocą zapytań o multimedia dotyczące rozmiaru strony.

Czy układy makro zawsze używają zapytań multimedialnych, aby dostosować się do różnych rozmiarów ekranu?

Prawda
Spróbuj jeszcze raz. Układ makro nie jest zdefiniowany przez użycie zapytań dotyczących multimediów.
Fałsz
🎉 Układy makro mogą dostosowywać się m.in. do treści i wypełniania przestrzeni bez zapytań o multimedia.

Teraz, gdy masz już pewne pomysły na makrokompozycje na poziomie strony, skup się na komponentach na stronie. To obszar mikroschematów.