Gdy myślimy o układach, często mamy na myśli projekty na poziomie strony. Mniejsze komponenty na stronie mogą jednak mieć własne, niezależne układy.
Najlepiej, aby układy na poziomie komponentu dostosowywały się automatycznie niezależnie od ich położenia na stronie. W niektórych sytuacjach możesz nie wiedzieć, czy komponent zostanie umieszczony w kolumnie głównej treści, na pasku bocznym czy w obu tych miejscach. Nie wiedząc, gdzie ostatecznie znajdzie się komponent, musisz mieć pewność, że będzie on w stanie dopasować się do swojego kontenera.
Siatka
Siatka CSS nie służy tylko do układów na poziomie strony. Sprawdza się też w przypadku komponentów, które się w nich znajdują.
W tym przykładzie ::before i ::after
pseudoelementy tworzą dekoracyjne linie po obu stronach nagłówka. Sam nagłówek jest kontenerem siatki. Poszczególne elementy są rozmieszczone tak, aby linie zawsze wypełniały dostępne miejsce.
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 sprawdzać układy siatki w Narzędziach deweloperskich w Chrome.
Flexbox
Jak sama nazwa wskazuje, za pomocą flexboxa możesz sprawić, że Twoje komponenty będą elastyczne. Możesz zadeklarować, które elementy komponentu powinny mieć minimalny lub maksymalny rozmiar, a pozostałe elementy będą się dostosowywać do dostępnego miejsca.
W tym przykładzie obraz zajmuje jedną czwartą dostępnego miejsca, a tekst – pozostałe trzy czwarte. Obraz nigdy nie jest większy niż 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 treści. Możesz określić parametry elementów (jak wąskie lub szerokie mają być) i pozwolić przeglądarce na ustalenie ostatecznej implementacji.
Sam komponent nie ma jednak świadomości swojego kontekstu. Nie wie, czy jest używany w treści głównej czy na pasku bocznym. Może to sprawić, że układy komponentów będą bardziej skomplikowane niż układy stron. Aby można było zastosować style dopasowane do kontekstu, komponenty muszą znać nie tylko rozmiar widocznego obszaru, w którym się znajdują.
W przypadku układów stron znasz szerokość kontenera, ponieważ jest nim obszar widoczny przeglądarki. Zapytania o media podają wymiary kontenera na poziomie strony.
Aby raportować wymiary dowolnego kontenera, używaj zapytań o kontener.
Na początek określ, które elementy mają pełnić funkcję kontenerów.
main,
aside {
container-type: inline-size;
}
Oznacza to, że chcesz wysłać zapytanie o wymiar wbudowany. W przypadku dokumentów w języku angielskim jest to oś pozioma. Zmienisz style na podstawie szerokości kontenera.
Jeśli komponent znajduje się w jednym z tych kontenerów, możesz zastosować style podobnie jak w przypadku zapytań o media.
.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ę w kontenerze węższym niż 25em, style flexbox nie są stosowane. Obraz i tekst są ułożone pionowo.
Jeśli jednak element zawierający jest szerszy niż 25em, obraz i tekst pojawiają się obok siebie.
Dzięki zapytaniom o kontener możesz niezależnie określać styl komponentów. Możesz pisać reguły na podstawie szerokości elementu zawierającego. Szerokość obszaru wyświetlania nie ma już znaczenia.
Łączenie zapytań
Do układu strony możesz używać zapytań o media, a do komponentów na stronie – zapytań o kontenery.
Ogólna struktura strony zawiera element main i element 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 o kontener dla obiektów multimedialnych pozostaje taka sama:
stosuj poziomy układ flexbox tylko wtedy, gdy element zawierający jest szerszy niż 25em.
Zapytania o kontener to przełomowe rozwiązanie w przypadku mikrokładów. Komponenty mogą być samodzielne i niezależne od obszaru widocznego przeglądarki.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o mikro układach.
Czy siatka i flexbox są przydatne w przypadku mikroukładów?
Wcześniej omówiliśmy układy makro na poziomie strony. Znasz już mikrokłady na poziomie komponentu.
Następnie zagłębisz się w podstawowe elementy treści i dowiesz się, jak tworzyć elastyczne obrazy. Najpierw dowiesz się, czym jest typografia responsywna.