Układy w trybie makro

Układy makr opisują większą organizację interfejsu na całej stronie.

Schemat z 2 kolumnami obok tego samego układu co jedna kolumna dla wąskiego widoku.

Zanim zastosujesz jakikolwiek układ, upewnij się, że przepływ treści ma sens. Domyślna kolejność wyświetlania w jednej kolumnie jest widoczna na mniejszych ekranach.

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

Rozmieszczając poszczególne komponenty na poziomie strony, projektujesz układ makra, czyli ogólny widok strony. Korzystając z zapytań o media, możesz podać reguły w CSS, które opisują, w jaki sposób ten widok powinien być dostosowywany do różnych rozmiarów ekranu.

Siatka

Siatka CSS to doskonałe narzędzie do stosowania układu na stronie. W powyższym przykładzie załóżmy, że chcesz utworzyć układ dwukolumnowy, gdy dostępna będzie wystarczająca szerokość ekranu. Aby zastosować ten układ dwukolumnowy, gdy przeglądarka będzie już wystarczająco szeroka, użyj zapytania o multimedia, aby zdefiniować style siatki powyżej określonego punktu przerwania.

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

Flexbox

W przypadku tego układu możesz też użyć elementu flexbox. Style będą wyglądały 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 oddzielną regułę określającą, ile miejsca powinna zająć. W przykładzie siatki te same informacje są zawarte w jednej regule dla elementu, który ją zawiera.

Czy potrzebujesz zapytania o multimedia?

Nie zawsze trzeba używać zapytania o multimedia. Zapytania o multimedia działają dobrze, gdy wprowadzasz zmiany do kilku elementów, ale jeśli musisz często aktualizować układ, zapytania o multimedia mogą nie być potrzebne w przypadku wielu punktów przerwania.

Załóżmy, że masz stronę pełną elementów kart. Karty nigdy nie są szersze niż 15em. Chcesz umieścić w jednym wierszu tyle kart, ile się da. Możesz tworzyć zapytania o media z punktami przerwania 30em, 45em, 60em itd., ale jest to dość żmudne i trudne w utrzymaniu.

Zamiast tego możesz zastosować reguły, aby 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żesz uzyskać dzięki Flexbox. W takim przypadku, jeśli nie ma wystarczającej liczby kart do wypełnienia ostatniego wiersza, pozostałe karty zostaną rozciągnięte, aby wypełnić dostępne miejsce, a nie ułożone 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;
}

Zastosowanie niektórych reguł inteligentnych w flexbox lub siatce pozwala projektować dynamiczne układy makr z minimalnym wykorzystaniem CSS i bez zapytań o multimedia. W Twoim przypadku jest to mniej pracy – zamiast tego przeglądarka wykonuje obliczenia. Przykłady nowoczesnych układów CSS, które działają płynnie i nie wymagają zapytań o media, znajdziesz na stronie 1linelayouts.com.

Sprawdź swoją wiedzę

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

Które zdanie najlepiej opisuje układy 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ą nic charakterystycznego dla układów makr.
Układy na niskim poziomie, które obejmują niewielką część 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żą ilość widocznego obszaru i często są dostosowywane za pomocą zapytań o media rozmiaru strony.

Układy makr zawsze dostosowują się do różnych rozmiarów ekranu na podstawie zapytań o multimedia?

Prawda
Spróbuj jeszcze raz. Układ makra nie jest zdefiniowany przez zapytania o media.
Fałsz
🎉 Układy makr mogą się dostosowywać do treści, wypełniania dostępnego miejsca i innych elementów bez zapytań o multimedia.

Masz już pomysły na układy makr na poziomie strony, więc zwróć uwagę na komponenty na stronie. To obszar mikroukładów.