Elementy HTML na stronach internetowych nie są rozmieszczone przypadkowo. Każda strona jest (a przynajmniej powinna być) starannie zaplanowana i wszystkie jej części są dokładnie wpasowane w tych miejscach, w których przewidział to projektant.
Sprawienie, aby wszystkie elementy strony internetowej znajdowały się we właściwych miejscach i odpowiednio się zachowywały podczas zmiany rozmiaru okna przeglądarki nie jest najprostszym zadaniem, ale nie jest też niemożliwe. W Kaskadowych arkuszach stylów dostępnych jest kilka technologii i technik umożliwiających realizację nawet najbardziej wyszukanych wizji artystycznych projektanta.
W tym rozdziale kursu znajdziesz zwięzły przegląd dostępnych w CSS metod tworzenia układów (potocznie zwanych layoutami) stron. Natomiast w paru kolejnych rozdziałach metody te zostały opisane szczegółowo. Krótko mówiąc, w tym rozdziale dowiesz się, kiedy używać określonych technik i technologii, a w następnych rozdziałach — jak się nimi posługiwać.
W tym rozdziale:
- Techniki pozycjonowania elementów CSS
- Układ wielokolumnowy CSS
- Technologia CSS Flexbox
- Technologia CSS Grid
Zaczniemy od technik pozycjonowania elementów, które działają w najmniejszej skali spośród wszystkich opisanych w tym rozdziale, ponieważ służą do określania położenia indywidualnych elementów.
Pozycjonowanie elementów CSS
Pozycjonowanie elementów w CSS opiera się na własności position oraz towarzyszących jej własnościach top, right, bottom, left (które odpowiednio określają odległość od górnej, prawej, dolnej i lewej krawędzi kontenera i są zbiorczo nazywane kierunkami fizycznymi) i z-index (która określa położenie elementu na osi 𝑧).
Za pomocą tego zestawu narzędzi można wybrać dowolny element HTML i umieścić go w dowolnym miejscu na stronie. Jeśli na przykład chcemy, aby dany element div znajdował się w odległości 100 pikseli od lewej i 50 pikseli od górnej krawędzi zawierającego go kontenera, to efekt ten z łatwością uzyskamy właśnie za pomocą własności position oraz top i left, np.:
.container {
position: relative;
}
div {
position: absolute;
left: 100px;
top: 50px;
}
Te dwie reguły sprawią, że lewy górny róg elementu div znajdującego się w elemencie należącym do klasy container będzie umieszczony w odległości 100 pikseli od lewej i 50 pikseli od górnej krawędzi kontenera.
W tym przykładzie kontener jest pozycjonowany względnie, a element div — jest pozycjonowany absolutnie w obrębie tego kontenera. Gdyby żaden z przodków pozycjonowanego elementu div nie był w jakikolwiek sposób pozycjonowany, to położenie tego elementu zostałoby ustalone w odniesieniu do krawędzi okna przeglądarki.
W rozdziale Pozycjonowanie elementów w CSS znajduje się opis wszystkich technik pozycjonowania elementów w CSS.
Układ wielokolumnowy
Drugą z wymienionych na początku technik CSS do tworzenia układów elementów na stronach internetowych jest Układ wielokolumnowy. W odróżnieniu od technik pozycjonowania, ta metoda służy do definiowania rozmieszczenia grup elementów w specyficzny sposób — w kolumnach, np.:
div {
column-count: 3;
}
Ta reguła CSS powoduje podzielenie treści elementu div na trzy kolumny o równej szerokości z wykorzystaniem całej dostępnej w poziomie przestrzeni.
Układ wielokolumnowy CSS to bardzo prosta technika do prezentowania treści w formie kolumn na wzór łamów tradycyjnych gazet. Mniejsza szerokość kolumn sprawia, że tekst łatwiej i przyjemniej się czyta.
W Układzie wielokolumnowym do dyspozycji mamy kilka przydatnych własności, za pomocą których możemy określać także pożądaną szerokość kolumn, definiować właściwości dzielącej je linii, czy określać szerokość dzielącego je odstępu. Realny przykład użycia tego rodzaju układu można znaleźć w tym portalu w poszczególnych lekcjach w Kursie angielskiego dla programistów i informatyków — jest wykorzystywany w dwukolumnowych sekcjach słownictwa.
Podsumowując, Układ wielokolumnowy CSS służy do dzielenia na kolumny wybranych sekcji strony, tak aby ich zawartość uczynić bardziej czytelną poprzez zmniejszenie szerokości wiersza tekstu.
Szczegółowy opis technologii Układów wielokolumnowych CSS znajduje się w rozdziale Układ wielokolumnowy CSS.
CSS Flexbox
Kolejną dostępną w CSS metodą rozmieszczania elementów HTML na stronie jest CSS Flexbox. Ta nowoczesna i uniwersalna metoda jest przeznaczona do tworzenia jednowymiarowych responsywnych układów elementów, czyli do rozmieszczanie ich w wierszach lub kolumnach.
Jeśli chcesz sprawnie i bez stosowania zbędnych sztuczek rozmieścić elementy poziomego paska albo uporządkować zawartość kolumny elementów, to CSS Flexbox prawdopodobnie będzie idealnym wyborem.
Typowym przykładem zastosowania, w którym technologia Flexbox CSS doskonale się sprawdza, jest tworzenie pasków menu. Starsza metoda polega na utworzeniu nieuporządkowanej listy HTML, nadaniu elementom listy (li) własności float o wartości left lub right i zdefiniowaniu odpowiednich ustawień marginesów, dopełnienia, obramowania, kolorów itd.
Sęk w tym, że technika elementów pływających nie została stworzona do rozmieszczania elementów menu, tylko do umieszczania obrazów graficznych obok tekstu, więc użycie jej w opisywany tutaj sposób jest rodzajem sztuczki, która pozwalała ominąć dawne ograniczenia technologii CSS. Obecnie tych ograniczeń nie ma, ponieważ można używać technologii CSS Flexbox, która została stworzona do użycia dokładnie w tego typu sytuacjach. Spójrz na poniższy przykład. Mamy następujące menu nawigacyjne:
<nav>
<ul>
<li><a href="#">Element 1</a></li>
<li><a href="#">Element 2</a></li>
<li><a href="#">Element 3</a></li>
<li><a href="#">Element 4</a></li>
<ul>
</nav>
Powiedzmy, że chcielibyśmy, aby menu to zajmowało całą szerokość okna przeglądarki, a jego elementy były wyrównane do środka i rozmieszczone w równych odstępach od siebie. Za pomocą technik Flexbox CSS można to osiągnąć w łatwy i klarowny sposób:
nav {
padding: 10px;
border: 1px solid grey;
border-radius: 10px;
}
nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
justify-content: center;
gap: 50px;
}
Efekt zastosowania tych ustawień do powyższego menu jest następujący:
Alt: Przykładowe menu utworzone za pomocą CSS FlexboxPodsumowując, jeśli chcesz wygodnie i bezproblemowo rozmieścić grupę elementów w pionie lub poziomie, to techniki Flexbox CSS najprawdopodobniej będą najlepszym wyborem.
Szczegółowy opis technologii CSS Flexbox znajduje się w rozdziale CSS Flexbox.
CSS Grid
Ostatnią technologią tworzenia układów elementów CSS jest CSS Grid. Ta najbardziej zaawansowana metoda umożliwia łatwe rozmieszczanie elementów w dwóch wymiarach, a więc jednocześnie w wierszach i kolumnach.
Słowo Grid, oznaczające siatkę, w nazwie tej technologii nie znalazło się przypadkowo, ponieważ układy tego typu są oparte właśnie na wirtualnej siatce, na której rozmieszcza się elementy HTML.
Warto przy tym podkreślić, że siatka ta jest całkowicie niezależna od elementów, tzn. najpierw definiuje się pewną liczbę wierszy i kolumn, które tworzą sieć komórek, a następnie na tych komórkach rozkłada się w określony sposób wybrane elementy.
Technologia CSS Grid doskonale nadaje się do tworzenia układów całych stron internetowych. Na przykład utworzenie poniższego układu przy użyciu technologii Grid CSS jest bardzo łatwe.
Alt: Przykładowy layout strony internetowejPoniżej znajduje się uproszczony szkielet struktury HTML5 takiego dokumentu:
<div id="container">
<nav id="navigation"></nav>
<aside id="left-sidebar"></aside>
<article></article>
<aside id="right-sidebar"></aside>
<footer id="footer"></footer>
</div>
Do uzyskania pokazanego układu na podstawie powyższej struktury HTML5 wystarczy poniższy arkusz stylów:
#container {
display: grid;
grid-template-columns: 1.5fr 4fr 1fr;
grid-template-rows: 60px 300px 60px;
grid-template-areas: "nav nav nav"
"lts mid rts"
"foo foo foo";
gap: 20px;
}
nav, aside, article, footer {
border: 4px solid black;
}
nav {
grid-area: nav;
background-color: yellow;
}
#left-sidebar {
grid-area: lts;
background-color: blue;
}
article {
grid-area: mid;
background-color: red;
}
#right-sidebar {
grid-area: rts;
background-color: green;
}
footer {
grid-area: foo;
background-color: lightpink;
}
W kodzie tym brak jest jakichkolwiek sztuczek, obejść czy niepewnych technik. Kod jest prosty i klarowny, a z pewnością o wiele prostszy niż byłby, gdyby użyto starszych technik tworzenia układów, takich jak np. elementy pływające.
Podsumowując, jeśli chcesz zdefiniować strukturę całej strony internetowej albo chcesz rozmieścić grupę elementów na dwuwymiarowej siatce, to technologia CSS Grid może być najlepszym wyborem.
Oczywiście nic nie stoi też na przeszkodzie, aby mieszać wszystkie dostępne techniki i technologie. Jeśli wewnątrz układu CSS Grid zdarzy się sytuacja, w której odpowiednie wydaje się użycie CSS Flexbox, to jak najbardziej nie wahaj się przed użyciem tej technologii.
W tym rozdziale pokazałem tylko drobny wycinek możliwości technologii CSS Grid. Jeśli chcesz dowiedzieć się więcej, to jej szczegółowy opis znajduje się w rozdziale CSS Grid Layout.
