Tabele i siatki w RWD – porady

Tabele i siatki w RWD – porady

Układanie elementów w responsywnym projekcie

Projektowanie responsywnych stron internetowych to dziedzina, w której nieustannie ewoluują najlepsze praktyki. Jednym z kluczowych aspektów jest umiejętne układanie elementów na stronie, tak aby wyglądały dobrze niezależnie od wielkości ekranu. W tym artykule przyjrzymy się bliżej dwóm najpopularniejszym metodom: tabelom i siatkom.

Tabele – tradycyjne podejście

Zacznijmy od tradycyjnego podejścia, jakim są tabele. Jeszcze nie tak dawno, gdy projektowaliśmy strony internetowe, tabele były podstawowym narzędziem do układania elementów obok siebie. Najczęściej używaliśmy ich do tworzenia układów kolumnowych na stronach.

Pamiętacie te czasy? Każda komórka tabeli zawierała swój fragment treści – obrazek, tekst, ikonkę. To pozwalało Nam utrzymać wszystkie elementy w odpowiednim miejscu i zachować przejrzystość układu. Niestety, tabele mają jedną poważną wadę – nie radzą sobie zbyt dobrze z responsywnością.

Responsywność to kluczowa cecha współczesnych stron internetowych. Muszą one prawidłowo wyświetlać się na urządzeniach o różnych rozmiarach ekranów – od dużych monitorów komputerowych, po smartfony. Tabele niestety nie do końca sobie z tym radzą. Gdy zmniejszamy rozmiar okna przeglądarki, komórki tabeli zazwyczaj zachowują swoje stałe wymiary, powodując rozjechanie się układu.

Możemy oczywiście stosować rozmaite triki, takie jak nadawanie komórkom tabeli elastycznych rozmiarów, ale to tylko połowiczne rozwiązanie. W momencie, gdy ekran staje się naprawdę wąski, tabela po prostu przestaje spełniać swoją funkcję.

Siatki – nowoczesne narzędzie

I tutaj z pomocą przychodzi nam concept siatek (ang. grids). To nowoczesne, dedykowane narzędzie do tworzenia responsywnych układów na stronach internetowych. Idea jest prosta – zamiast jednej tabeli, dzielimy stronę na szereg kolumn, które mogą się w różny sposób “układać” w zależności od wielkości ekranu.

Podstawowym kodem do stworzenia takiej siatki jest system oparty na Flexbox lub CSS Grid. Oto prosty przykład wykorzystujący Flexbox:

“`html

“`

“`css
.row {
display: flex;
flex-wrap: wrap;
}

.col-4 {
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
“`

W powyższym przykładzie mamy wiersz (<div class="row">) zawierający trzy kolumny (<div class="col-4">). Każda kolumna zajmuje 1/3 szerokości wiersza. Gdy zmniejszamy rozmiar ekranu, kolumny “składają się” jedna pod drugą, zachowując proporcje.

To jest kluczowa różnica w porównaniu do tabel – siatki oparte na Flexbox czy CSS Grid są responsywne “z automatu”. Nie musimy się martwić o to, jak układ będzie wyglądał na różnych urządzeniach – siatka sama się do tego dostosuje.

Praktyczne zastosowanie siatek

Siatki to narzędzie niezwykle uniwersalne. Możemy je wykorzystywać w wielu miejscach na stronie – od layoutu głównej zawartości, po rozmieszczenie elementów w ramach mniejszych modułów.

Weźmy na przykład sekcję z ofertą produktów na stronie sklepu internetowego. Zazwyczaj chcemy, aby produkty ułożyły się w kilku kolumnach na dużych ekranach, a na mniejszych urządzeniach przeszły w układ jednkolumnowy.

Oto jak możemy to osiągnąć za pomocą siatki:

“`html

“`

“`css
.row {
display: flex;
flex-wrap: wrap;
margin: -15px;
}

.col-4 {
flex: 0 0 33.333333%;
max-width: 33.333333%;
padding: 15px;
}

.product-box {
background-color: #f5f5f5;
padding: 20px;
text-align: center;
}

@media (max-width: 767px) {
.col-4 {
flex: 0 0 100%;
max-width: 100%;
}
}
“`

W powyższym przykładzie mamy wiersz zawierający trzy kolumny, każda z nich zawierająca jedną “kartkę” produktu. Na dużych ekranach produkty ułożą się obok siebie, a na mniejszych urządzeniach przejdą w układ jednkolumnowy.

Warto zwrócić uwagę na kilka kluczowych elementów:

1. Zastosowanie display: flex i flex-wrap: wrap na elemencie .row pozwala na responsywne ułożenie kolumn.
2. Klasa .col-4 określa, że każda kolumna zajmuje 1/3 szerokości wiersza.
3. Dodatkowe stylowanie elementu .product-box daje nam kontrolę nad wyglądem poszczególnych “kartek” produktów.
4. Media query @media (max-width: 767px) pozwala nam zmodyfikować układ kolumn na mniejszych ekranach – w tym przypadku każda kolumna zajmie 100% szerokości wiersza.

Taki sposób organizacji elementów na stronie daje Nam ogromną elastyczność. Możemy dowolnie konfigurować liczbę kolumn, ich szerokość, a nawet zmieniać układ w zależności od rozmiaru ekranu.

Zaawansowane możliwości siatek

Siatki to naprawdę potężne narzędzie. Oprócz podstawowego układania elementów obok siebie, możemy wykorzystać je do wielu innych zastosowań.

Jednym z nich jest na przykład responsywne rozmieszczenie elementów w ramach mniejszych modułów na stronie. Wyobraźmy sobie sekcję “O nas” na stronie internetowej. Zazwyczaj chcemy, aby zdjęcie właściciela i krótki opis znajdowały się obok siebie na dużych ekranach, a na mniejszych urządzeniach ułożyły się jedna pod drugą.

Oto jak możemy to osiągnąć:

“`html

“`

“`css
.about-section {
margin-top: 50px;
}

.about-section .col-6 {
display: flex;
align-items: center;
}

.about-section img {
max-width: 100%;
height: auto;
}

@media (max-width: 767px) {
.about-section .col-6 {
flex: 0 0 100%;
max-width: 100%;
}

.about-section img {
margin-bottom: 20px;
}
}
“`

W powyższym przykładzie mamy sekcję “O nas” podzieloną na dwie kolumny – jedna na zdjęcie, druga na opis. Na dużych ekranach elementy ułożą się obok siebie, a na mniejszych urządzeniach przejdą w układ jednkolumnowy.

Warto zwrócić uwagę na kilka szczegółów:

1. Zastosowanie display: flex i align-items: center na kolumnach powoduje, że zdjęcie i opis będą wyśrodkowane pionowo.
2. Ustawienie max-width: 100% na obrazku sprawia, że będzie on skalował się proporcjonalnie do szerokości kolumny.
3. Media query @media (max-width: 767px) pozwala nam zmienić układ na mniejszych ekranach – każda kolumna zajmie teraz 100% szerokości wiersza, a zdjęcie znajdzie się nad opisem.

Tego typu zaawansowane układy można tworzyć w nieskończoność, dostosowując je do konkretnych potrzeb projektu. Siatki dają Nam ogromną swobodę i kontrolę nad rozmieszczeniem elementów na stronie.

Podsumowanie

Tabele to oczywiście nadal użyteczne narzędzie, szczególnie w przypadku prostych układów, gdzie nie wymaga się responsywności. Jednak w dobie urządzeń mobilnych i zróżnicowanych ekranów siatki oparte na Flexbox czy CSS Grid stają się znacznie lepszym wyborem.

Pozwalają one na tworzenie układów, które automatycznie dostosowują się do wielkości ekranu, bez konieczności używania dodatkowych trików czy złożonych media queries. To czyni proces projektowania responsywnych stron internetowych o wiele prostszym i bardziej intuicyjnym.

Mam nadzieję, że ten artykuł pomógł Ci lepiej zrozumieć różnice między tabelami a siatkami, a także dodał kilka inspirujących pomysłów na to, jak wykorzystać siatki w Twoich własnych projektach. Powodzenia!

Strony internetowe UK