Mówiąc o układach, często mamy na myśli projekty na poziomie strony. Jednak mniejsze elementy na stronie mogą mieć własne, niezależne układy.
W idealnej sytuacji te układy na poziomie komponentów dostosowują się automatycznie, niezależnie od swojego położenia na stronie. W niektórych sytuacjach nie wiadomo, czy dany komponent zostanie umieszczony w głównej kolumnie z treścią, na pasku bocznym czy w obu tych miejscach. Nie mając pewności, dokąd się trafi, musisz upewnić się, że komponent może się dostosować do swojego kontenera.
GRid
Siatka CSS jest przeznaczona nie tylko do układów na poziomie strony. Sprawdza się też w przypadku komponentów, które w nich znajdują się.
W tym przykładzie pseudoelementy ::before i ::after tworzą po obu stronach nagłówka ozdobne linie. Sam nagłówek jest kontenerem siatki. Pojedyncze elementy są rozmieszczone tak, aby linie zawsze wypełniały dostępną przestrzeń.
h1 {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 1em;
}
h1::before,
h1::after {
content: "";
border-top: 0.1em double black;
align-self: center;
}
Dowiedz się, jak sprawdzić układy siatki w Narzędziach deweloperskich w Chrome.
Flexbox
Jak sama nazwa wskazuje, komponenty możesz tworzyć bardziej elastyczne dzięki flexbox. Możesz zadeklarować, które elementy w komponencie powinny mieć minimalny lub maksymalny rozmiar, a pozostałe elementy będą się swobodnie dopasowywać.
W tym przykładzie obraz zajmuje jedną czwartą dostępnego miejsca, a tekst – pozostałe trzy czwarte. Jednak rozmiar obrazu nigdy nie przekracza 200 pikseli.
.media {
display: flex;
align-items: center;
gap: 1em;
}
.media-illustration {
flex: 1;
max-inline-size: 200px;
}
.media-content {
flex: 3;
}
Dowiedz się, jak sprawdzać układy Flexbox w Narzędziach deweloperskich w Chrome.
Zapytania dotyczące kontenerów
Flexbox umożliwia projektowanie od początku do końca. Możesz określić parametry elementów (jak wąskie mają być parametry i jak szerokie) i pozwolić przeglądarce na skonfigurowanie ostatecznej implementacji.
Jednak sam komponent nie ma informacji o kontekście. Nie wie, czy jest używany w głównej treści czy na pasku bocznym. Może to sprawić, że układy komponentów będą trudniejsze niż układy stron. Aby można było zastosować style dopasowane do kontekstu, komponenty muszą orientować się więcej niż rozmiar widocznego obszaru, w którym się znajdują.
W przypadku układów stron znasz szerokość kontenera, ponieważ kontener to widoczny obszar przeglądarki, a zapytania o multimedia podają wymiary kontenera na poziomie strony.
Aby raportować wymiary dowolnego kontenera, użyj zapytań dotyczących kontenerów.
Na początek określ, które elementy mają być kontenerami.
main,
aside {
container-type: inline-size;
}
Oznacza to, że chcesz wysyłać zapytanie dotyczące wymiaru wbudowanego. W przypadku dokumentów w języku angielskim jest to oś pozioma. Będziesz zmieniać style w zależności od szerokości kontenera.
Jeśli komponent znajduje się w jednym z tych kontenerów, możesz stosować style podobne do stosowanego zapytań o multimedia.
.media-illustration {
max-width: 200px;
margin: auto;
}
@container (min-width: 25em) {
.media {
display: flex;
align-items: center;
gap: 1em;
}
.media-illustration {
flex: 1;
}
.media-content {
flex: 3;
}
}
Jeśli obiekt multimedialny znajduje się wewnątrz kontenera węższego niż 25em, style Flexbox nie zostaną zastosowane. Obraz i tekst są ustawione w pionie.
Jeśli jednak element zawierający jest szerszy niż 25em, obraz i tekst pojawią się obok siebie.
W przypadku zapytań dotyczących kontenerów możesz zmieniać style komponentów niezależnie. Możesz tworzyć reguły oparte na szerokości elementu, który zawiera; szerokość widocznego obszaru nie ma już znaczenia.
Łączenie zapytań
Do zapytań o układ strony i kontenerów w przypadku komponentów znajdujących się na stronie możesz używać zapytań o media.
Ogólna struktura strony składa się tutaj z elementów main i aside.
W obu elementach znajdują się obiekty multimedialne.
<body>
<main>
<div class="media">…</div>
<div class="media">…</div>
</main>
<aside>
<div class="media">…</div>
</aside>
</body>
Zapytanie o multimedia stosuje układ siatki do elementów main i aside, gdy widoczny obszar jest szerszy niż 45em.
@media (min-width: 45em) {
body {
display: grid;
grid-template-columns: 3fr 1fr;
}
}
Reguła zapytania kontenera dla obiektów multimedialnych pozostaje taka sama: stosuje się poziomy układ Flexbox tylko wtedy, gdy element zawierający jest szerszy niż 25em.
Zapytania dotyczące kontenerów to rewolucyjne rozwiązanie w przypadku mikroukładów. Komponenty mogą być samodzielne, niezależnie od widocznego obszaru przeglądarki.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę na temat mikroukładów.
Siatka i flexbox przydają się w przypadku mikroukładów.
Wcześniej omówiliśmy układy makr na poziomie strony. Teraz wiesz już o układach mikro na poziomie komponentów.
Następnie bardziej szczegółowo poznasz elementy składowe treści i dowiesz się, jak sprawić, by obrazy były elastyczne. Najpierw zapoznaj się z elastyczną typografią.