Układy makro opisują większą, obejmującą całą stronę organizację interfejsu.
Zanim zastosujesz jakikolwiek układ, upewnij się, że przepływ treści jest logiczny. Domyślne sortowanie w jednej kolumnie jest stosowane na mniejszych ekranach.
<body>
<header>…</header>
<main>
<article>…</article>
<aside>…</aside>
</main>
<footer>…</footer>
</body>
Gdy rozmieszczasz te poszczególne komponenty na poziomie strony, projektujesz makro układ, czyli widok strony na wysokim poziomie. Za pomocą zapytań o multimedia możesz podać w CSS reguły opisujące, jak ten 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 poprzednim przykładzie załóżmy, że chcesz, aby układ dwukolumnowy był dostępny, gdy szerokość ekranu jest wystarczająca. Aby zastosować ten 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;
}
}
Flexbox
W przypadku tego konkretnego układu możesz też użyć flexbox. Style wyglądałyby tak:
@media (min-width: 45em) {
main {
display: flex;
flex-direction: row;
}
main article {
flex: 2;
}
main aside {
flex: 1;
}
}
Wersja z flexboxem wymaga jednak więcej kodu CSS. Każda kolumna ma osobną regułę określającą, ile miejsca powinna zajmować. W przykładzie siatki te same informacje są zawarte w jednej regule dla elementu zawierającego.
Czy potrzebujesz zapytania o media?
Nie zawsze musisz używać zapytania o media. Zapytania o media działają dobrze, gdy wprowadzasz zmiany w kilku elementach, ale jeśli układ wymaga wielu aktualizacji, zapytania o media mogą się rozrosnąć i zawierać wiele punktów przerwania.
Załóżmy, że masz stronę pełną komponentów kart.
Karty nigdy nie są szersze niż 15em i chcesz umieścić jak najwięcej kart w jednym wierszu.
Możesz pisać zapytania o media z punktami przerwania, takimi jak 30em, 45em i 60em, ale jest to dość żmudne i trudne do utrzymania.
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ć za pomocą flexboxa. 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ępną przestrzeń, zamiast ustawiać się 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;
}
Stosując w flexboxie lub siatce kilka inteligentnych reguł, można zaprojektować dynamiczne układy makro przy użyciu minimalnej ilości kodu CSS i bez zapytań o media. Wymaga to mniej pracy z Twojej strony, ponieważ obliczenia wykonuje przeglądarka. Przykłady nowoczesnych układów CSS, które są elastyczne bez konieczności stosowania zapytań o media, znajdziesz na stronie 1linelayouts.com.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o układach makro.
Które zdanie najlepiej opisuje układy makro?
Czy układy makro zawsze używają zapytań o multimedia, aby dostosowywać się do różnych rozmiarów ekranu?
Teraz, gdy masz już pomysły na makrokompozycje na poziomie strony, skup się na komponentach na stronie. To domena mikro układów.