Układy w trybie makro

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

Schemat układu dwukolumnowego z tym samym układem co jedna kolumna, zapewniając wąski widok.

Przed zastosowaniem układu upewnij się, że pojawianie się w nich treści ma sens. 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. Korzystając z zapytań o media, możesz podać w CSS reguły określające, jak dany widok ma 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ć układ dwukolumnowy, gdy przeglądarka jest wystarczająco szeroka, użyj zapytania o media, aby zdefiniować style siatki powyżej określonego punktu przerwania.

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

Urządzenie Flexbox

W przypadku tego konkretnego układu można 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;
  }
}

Jednak wersja flexbox wymaga więcej kodu CSS. Każda kolumna ma osobną regułę określającą, ile miejsca powinna ona zajmować. W przykładowej siatce te same informacje znajdują się w jednej regule dla elementu, który ją zawiera.

Potrzebujesz zapytania o media?

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 i chcesz umieścić ich jak najwięcej w jednym wierszu. 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. Oznacza to mniej pracy, ponieważ obliczenia są wykonywane przez przeglądarkę. Przykłady nowoczesnych układów CSS, które są elastyczne i nie wymagają zapytań o media, znajdziesz w artykule 1linelayouts.com.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o układach makr.

Które zdanie najlepiej opisuje układ makr?

Układy zawierające 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ą żadnych właściwości charakterystycznych 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 makr zawsze korzystają z zapytań o multimedia, aby dostosowywać się do różnych rozmiarów ekranu?

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

Skoro masz już pomysły na układy makr na poziomie strony, zwróć uwagę na komponenty na stronie. To jest obszar mikroukłady.