Responsywne kontenery i fluid layout

Wyobraź sobie, że budujesz świątynię w Starożytnym Egipcie. Mury świątyni muszą pomieścić wszystkie hieroglify i rzeźby, niezależnie od tego, czy sala jest wąska, czy przestronna. W CSS działa to podobnie - kontener musi dostosowywać się do dostępnej przestrzeni.

Stały vs płynny layout

Tradycyjnie strony budowano ze stałymi szerokościami w pikselach. Problem? Na małym telefonie treść wychodziła poza ekran, a na ogromnym monitorze zajmowała tylko wąski pasek.

1/* Stały layout - ZŁE podejście */
2.container {
3  width: 960px; /* Zawsze 960px, niezależnie od ekranu */
4}

Rozwiązaniem jest fluid layout (płynny układ) - używamy jednostek procentowych zamiast pikseli:

1/* Płynny layout - DOBRE podejście */
2.container {
3  width: 100%; /* Zajmuje całą dostępną szerokość */
4}

Wzorzec responsywnego kontenera

Kluczowym wzorcem w responsywnym CSS jest responsywny kontener. Łączy trzy właściwości:

1.container {
2  width: 100%;         /* Pełna szerokość na małych ekranach */
3  max-width: 1200px;   /* Ograniczenie na dużych ekranach */
4  margin: 0 auto;      /* Wycentrowanie na stronie */
5}

Jak to działa?

• Na telefonie (320px szerokości) - kontener ma 320px (100% ekranu)
• Na tablecie (768px) - kontener ma 768px (100% ekranu)
• Na laptopie (1366px) - kontener ma 1200px (max-width) i jest wycentrowany
• Na dużym monitorze (1920px) - kontener nadal ma 1200px, wycentrowany z marginesami po bokach

To jak korytarz w piramidzie - treść nigdy nie jest zbyt szeroka, ale na wąskich przejściach wykorzystuje całą dostępną przestrzeń.

box-sizing: border-box

Jedna z najważniejszych deklaracji CSS dla responsywnego projektowania:

1*, *::before, *::after {
2  box-sizing: border-box;
3}

Bez border-box, padding i border dodają się do szerokości elementu:

1/* Bez border-box */
2.box {
3  width: 100%;
4  padding: 20px;
5  /* Rzeczywista szerokość: 100% + 40px padding = WYCHODZI POZA EKRAN! */
6}
7
8/* Z border-box */
9.box {
10  box-sizing: border-box;
11  width: 100%;
12  padding: 20px;
13  /* Rzeczywista szerokość: 100% (padding jest WEWNĄTRZ) */
14}

To fundamentalna zasada - bez border-box element o width: 100% z paddingiem będzie szerszy niż ekran!

Praktyczny przykład: Sekcja z treścią

Zobaczmy jak zbudować responsywną sekcję strony bez użycia Flexboxa czy Grida:

1<section class="features">
2  <div class="container">
3    <h2>O Starożytnym Egipcie</h2>
4    <p>Cywilizacja egipska trwała ponad 3000 lat...</p>
5  </div>
6</section>

1* {
2  box-sizing: border-box;
3}
4
5.features {
6  width: 100%;           /* Sekcja na całą szerokość */
7  padding: 40px 20px;    /* Wewnętrzne odstępy */
8  background-color: #F4E4C1;
9}
10
11.container {
12  width: 100%;
13  max-width: 1200px;
14  margin: 0 auto;       /* Centrowanie */
15  padding: 0 20px;      /* Boczne padding - treść nie przylega do krawędzi */
16}

Wiele kontenerów na stronie

Siła wzorca kontenera polega na tym, że możesz go użyć wielokrotnie:

1<header class="hero">
2  <div class="container">
3    <h1>Piramida Cheopsa</h1>
4  </div>
5</header>
6
7<section class="about">
8  <div class="container">
9    <p>Informacje o piramidzie...</p>
10  </div>
11</section>
12
13<footer class="footer">
14  <div class="container">
15    <p>Stopka strony</p>
16  </div>
17</footer>

Każda sekcja może mieć inny kolor tła na 100% szerokości, ale treść wewnątrz jest zawsze ograniczona przez kontener. Jeśli grafik zmieni projekt i trzeba poszerzyć układ z 1200px na 1440px - zmieniasz jedną wartość max-width w klasie .container.

Padding jako bezpieczna przestrzeń

Na urządzeniach mobilnych treść nie powinna przylegać do samej krawędzi ekranu. Dlatego dodajemy padding:

1.container {
2  width: 100%;
3  max-width: 1200px;
4  margin: 0 auto;
5  padding-left: 16px;   /* Bezpieczna przestrzeń po lewej */
6  padding-right: 16px;  /* Bezpieczna przestrzeń po prawej */
7}

Na większych ekranach (tabletach) można zwiększyć ten padding za pomocą media queries:

1@media (min-width: 768px) {
2  .container {
3    padding-left: 32px;
4    padding-right: 32px;
5  }
6}

Podsumowanie

Responsywny kontener to fundament każdej strony internetowej:

• width: 100% - dopasowanie do małych ekranów
• max-width - ograniczenie na dużych ekranach
• margin: 0 auto - centrowanie
• box-sizing: border-box - padding nie powiększa elementu
• padding - bezpieczna przestrzeń od krawędzi

Wypróbuj ten wzorzec w edytorze poniżej:

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Responsywne kontenery - Fluid Layout</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <header class="hero">
11        <div class="container">
12            <h1>Piramida Cheopsa</h1>
13            <p>Odkryj tajemnice responsywnych kontenerów</p>
14        </div>
15    </header>
16
17    <section class="about">
18        <div class="container">
19            <h2>Kontener z max-width</h2>
20            <p>Ten kontener ma <code>width: 100%</code> i <code>max-width: 1200px</code>. Na małych ekranach zajmuje całą szerokość, na dużych jest ograniczony do 1200px i wycentrowany.</p>
21            <p>Zmień rozmiar okna przeglądarki, aby zobaczyć jak kontener się zachowuje!</p>
22        </div>
23    </section>
24
25    <section class="comparison">
26        <div class="container">
27            <h2>Stały vs Płynny layout</h2>
28
29            <div class="box fixed-box">
30                <h3>Stały (fixed)</h3>
31                <p>width: 960px - nie dostosowuje się do ekranu</p>
32            </div>
33
34            <div class="box fluid-box">
35                <h3>Płynny (fluid)</h3>
36                <p>width: 100% + max-width: 800px - dopasowuje się!</p>
37            </div>
38        </div>
39    </section>
40
41    <section class="box-sizing-demo">
42        <div class="container">
43            <h2>box-sizing: border-box</h2>
44
45            <div class="box without-border-box">
46                <h3>Bez border-box</h3>
47                <p>width: 100% + padding: 30px = wychodzi poza kontener!</p>
48            </div>
49
50            <div class="box with-border-box">
51                <h3>Z border-box</h3>
52                <p>width: 100% + padding: 30px = mieści się idealnie!</p>
53            </div>
54        </div>
55    </section>
56
57    <footer class="footer">
58        <div class="container">
59            <p>Stopka strony - ten sam kontener co powyżej</p>
60        </div>
61    </footer>
62</body>
63</html>