Układy makr opisują większy układ interfejsu obejmujący całą stronę.
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?
Czy układy makr zawsze korzystają z zapytań o multimedia, aby dostosowywać się do różnych rozmiarów ekranu?
Skoro masz już pomysły na układy makr na poziomie strony, zwróć uwagę na komponenty na stronie. To jest obszar mikroukłady.