Układ

Podcast o CSS – 009: Układ

Wyobraź sobie, że pracujesz jako programista, a współpracownik z projektu wręcza Ci projekt zupełnie nowej witryny. Projekt oferuje różne ciekawe układy i kompozycje: dwuwymiarowe układy uwzględniające szerokość i wysokość widocznego obszaru oraz układy, które muszą być elastyczne i elastyczne. Jak wybrać najlepszy sposób stylizacji za pomocą CSS?

CSS pozwala na różne sposoby rozwiązywania problemów z układem: na osi poziomej, pionowej, a nawet obu. Wybór odpowiedniej metody układu dla kontekstu może być trudny, a rozwiązanie problemu często wymaga więcej niż jednej metody. Aby Ci w tym pomóc, w kolejnych modułach poznasz unikalne cechy poszczególnych mechanizmów układu CSS, które wpływają na podejmowanie decyzji.

Układ: krótka historia

W początkach internetu projektuje się bardziej złożony niż prosty dokument z elementami <table>. Oddzielenie kodu HTML od stylów wizualnych stało się łatwiejsze, gdy pod koniec lat 90. XX wieku przeglądarki stały się powszechnie używane. CSS umożliwił deweloperom całkowitą zmianę wyglądu i sposobu działania witryny bez konieczności ingerowania w kod HTML. Te nowe możliwości zainspirowały nas np. do projektu The CSS Zen Garden, który ma zademonstrować możliwości CSS i zachęcić większą liczbę deweloperów do poznawania tej technologii.

Usługi porównywania cen ewoluują wraz z ewolucją naszych potrzeb w zakresie projektowania stron i technologii przeglądarek. O tym, jak z czasem zmieniały się układ CSS i nasze podejście do układu, możesz przeczytać w tym artykule napisanej przez Rachel Andrew.

Układ: teraźniejszość i przyszłość

Nowoczesny kod CSS udostępnia niezwykle zaawansowane narzędzia układu. Mamy specjalne systemy do obsługi układów tych reklam. Zanim przejdziemy do dalszych modułów, omówimy je szczegółowo.

Informacje o właściwości display

Właściwość display spełnia 2 funkcje. Pierwszą rzeczą, jaką wykonuje on, jest określenie, czy pole, dla którego został zastosowany, ma pełnić funkcję elementu wbudowanego czy blokowego.

.my-element {
  display: inline;
}

Elementy w tekście działają jak słowa w zdaniu. Znajdują się one obok siebie w wierszu. Elementy takie jak <span> i <strong>, które zwykle służą do określania stylu fragmentów tekstu w elementach takich jak <p> (akapit), są domyślnie umieszczone w tekście. Zachowują też otaczającą przestrzeń.

Nie można bezpośrednio określić szerokości ani wysokości elementów wbudowanych. Wszelkie marginesy i dopełnienie na poziomie bloku będą ignorowane przez sąsiadujące z nimi elementy.

.my-element {
    display: block;
}

Elementy z bloków nie znajdują się obok siebie. Tworzy dla siebie nową linię. Jeśli nie zmienisz innego kodu CSS, element blokowy rozwinie się do rozmiaru wbudowanego wymiaru, więc rozciąga się na całą szerokość w trybie pisania w poziomie. Margines po wszystkich stronach elementu blokowego jest uwzględniany.

.my-element {
    display: flex;
}

Właściwość display określa też sposób zachowania elementów podrzędnych elementu. Na przykład ustawienie właściwości display na display: flex sprawia, że pole staje się polem na poziomie bloku, a także konwertuje jego elementy podrzędne na elementy elastyczne. Włącza właściwości Flex, które kontrolują wyrównywanie, kolejność i przepływ.

Flexbox i siatka

Istnieją 2 główne mechanizmy, które tworzą reguły układu dla wielu elementów: flexbox i siatka. Są podobne, ale mają na celu rozwiązywanie różnych problemów z układem.

Flexbox

.my-element {
    display: flex;
}

Flexbox to mechanizm układów jednowymiarowych. układaj się względem jednej osi, poziomo lub pionowo. Domyślnie funkcja Flexbox wyrównuje elementy podrzędne elementu obok siebie w kierunku linii i rozciąga je w kierunku bloku, aby mieć tę samą wysokość.

Elementy pozostaną na tej samej osi i nie zawijają się, gdy skończy im się miejsce. Zamiast tego będą oni starali się ściskać tę samą linię co siebie. To działanie można zmienić za pomocą właściwości align-items, justify-content i flex-wrap.

Flexbox konwertuje też elementy podrzędne na elementy elastyczne, co oznacza, że możesz pisać reguły zachowania ich w kontenerze elastycznym. Możesz zmienić wyrównanie, kolejność i uzasadnienie pojedynczego elementu. Za pomocą właściwości flex możesz też zmienić sposób jego zmniejszania i powiększania.

.my-element div {
    flex: 1 0 auto;
}

Właściwość flex to skrót nazw flex-grow, flex-shrink i flex-basis. Powyższy przykład możesz rozwinąć w ten sposób:

.my-element div {
 flex-grow: 1;
 flex-shrink: 0;
 flex-basis: auto;
}

Deweloperzy podają te reguły niskiego poziomu, aby wskazać przeglądarce, jak powinna działać układ, gdy zmaga się on z zawartością i wymiarami widocznego obszaru. To bardzo przydatny mechanizm projektowania stron responsywnych.

Siatka

.my-element {
    display: grid;
}

Siatka jest pod wieloma względami podobna do flexbox, ale służy do sterowania układami wieloosiowymi, a nie jednoosiowymi (pionowa lub pozioma).

Siatka umożliwia pisanie reguł układu w elemencie z elementem display: grid i wprowadza kilka nowych podstawowych metod określania stylu układu, np. repeat() i minmax(). Przydatną jednostką siatki jest fr, czyli odsetek pozostałej przestrzeni. Możesz tworzyć tradycyjne 12-kolumnowe siatki z odstępami między poszczególnymi elementami oraz 3 właściwościami CSS:

.my-element {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

W tym przykładzie powyżej przedstawiono układ z jedną osią. Flexbox traktuje elementy głównie jako grupę, a siatka zapewnia precyzyjną kontrolę nad ich umiejscowieniem w 2 wymiarach. Możemy określić, że pierwszy element w tej siatce zajmuje 2 wiersze i 3 kolumny:

.my-element :first-child {
  grid-row: 1/3;
  grid-column: 1/4;
}

Właściwości grid-row i grid-column instruują pierwszy element siatki, który rozciąga się od pierwszej kolumny do początku czwartej kolumny, a następnie rozciąga się do trzeciego wiersza od pierwszego wiersza.

Układ przepływu

Jeśli nie używasz siatki i flexboxa, elementy wyświetlają się w zwykły sposób. Istnieje wiele metod układu, które pozwalają dostosować zachowanie i pozycję elementów w normalnym przepływie.

Blok w treści

Pamiętasz, jak sąsiadujące ze sobą elementy nie uwzględniają marginesów bloków i dopełnienia elementu wbudowanego? Dzięki usłudze inline-block możesz tego uniknąć.

p span {
    display: inline-block;
}

Użycie właściwości inline-block powoduje wyświetlenie pola o niektórych charakterystycznych cechach elementu na poziomie bloku, ale które wciąż mieści się w tekście.

p span {
    margin-top: 0.5rem;
}

Swobodne

Jeśli masz obraz, który mieści się w akapicie tekstu, możnaby go otaczać, jak na przykład na gazecie? Możesz to zrobić za pomocą kreacji pływających.

img {
    float: left;
    margin-right: 1em;
}

Właściwość float instruuje element, by „pływał” w określonym kierunku. Obraz w tym przykładzie ma się unosić w lewo, co pozwala na „otaczanie” go elementami równorzędnymi. Możesz polecić element pływający left, right lub inherit.

Układ wielokolumnowy

Jeśli masz naprawdę długą listę elementów, np. listę wszystkich krajów, może to powodować duże przewijanie treści i marnowanie czasu. Może też tworzyć nadmierne odstępy na stronie. Wiele kolumn CSS umożliwia podzielenie ich na kilka kolumn, aby rozwiązać oba te problemy.

<h1>All countries</h1>
<ul class="countries">
  <li>Argentina</li>
  <li>Aland Islands</li>
  <li>Albania</li>
  <li>Algeria</li>
  <li>American Samoa</li>
  <li>Andorra</li>
  …
</ul>

.countries {
    column-count: 2;
    column-gap: 1em;
}

Ta długa lista zostanie automatycznie podzielona na 2 kolumny i doda lukę między nimi.

.countries {
    width: 100%;
    column-width: 260px;
    column-gap: 1em;
}

Zamiast podawać liczbę kolumn, na które jest podzielona treść, możesz też określić minimalną wymaganą szerokość za pomocą funkcji column-width. Im więcej miejsca w widocznym obszarze, tym więcej kolumn będzie tworzonych automatycznie, a w miarę zmniejszenia miejsca zmniejszy się też ilość kolumn. Jest to bardzo przydatne w kontekście elastycznego projektowania witryn.

Pozycjonowanie

Na koniec wspomnimy o pozycjonowaniu mechanizmów układów. Właściwość position zmienia sposób zachowania elementu w zwykłym przepływie dokumentu oraz jego związek z innymi elementami. Dostępne opcje to relative, absolute, fixed i sticky, przy czym domyślna wartość to static.

.my-element {
  position: relative;
  top: 10px;
}

Ten element jest przesuwany o 10 pikseli w dół zgodnie z bieżącym położeniem w dokumencie, ponieważ jest ustawiany względem siebie. Dodanie elementu position: relative do elementu powoduje też, że będzie on zawierać wszystkie elementy podrzędne z atrybutem position: absolute. Oznacza to, że jeśli zostanie zastosowana bezwzględna pozycja elementu nadrzędnego, jego położenie podrzędne zostanie teraz przeniesione do tego konkretnego elementu, a nie do najwyższego względnego elementu nadrzędnego.

.my-element {
  position: relative;
  width: 100px;
  height: 100px;
}

.another-element {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
}

Jeśli ustawisz position na absolute, element zostanie przerwany w bieżącym przepływie dokumentu. Oznacza to 2 rzeczy:

1. Możesz umieścić ten element w dowolnym miejscu, używając elementów top, right, bottom i left w najbliższym względnym elemencie nadrzędnym.
2. Cała zawartość otaczająca element bezwzględny przeformatuje się, aby wypełnić pozostałą przestrzeń pozostawioną przez ten element.

Element z wartością position równą fixed działa podobnie jak element absolute, gdzie jego element nadrzędny to główny element <html>. Elementy o stałej pozycji pozostają zakotwiczone w lewym górnym rogu na podstawie ustawionych wartości top, right, bottom i left.

Korzystając z sticky, możesz uzyskać zakotwiczone, stałe aspekty fixed i bardziej przewidywalne aspekty związane z uczeniem się przepływu dokumentów w relative. Dzięki tej wartości widoczny obszar przewija się poza element i jest zakotwiczony w ustawionych przez Ciebie wartościach top, right, bottom i left.

Podsumowanie

Układ CSS oferuje szeroki wybór i elastyczność. Aby lepiej poznać możliwości Flexbox i Grid CSS, przejdź do kolejnych modułów.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o układzie graficznym