Header, main, footer, nav: błąd, który psuje semantykę

Kiedy alt ma być pusty, a kiedy go nie używa

Uważaj na pułapki. Przy font-size: 0 znikają też odstępy między wyrazami w elemencie nadrzędnym, jeśli zapomnisz przywrócić rozmiar w dzieciach. Z kolei usuwanie spacji z HTML psuje czytelność i utrudnia pracę w zespołach, gdzie ktoś formatuje plik automatycznie. Komentarze działają, ale bywają kłopotliwe przy dynamicznym generowaniu znaczników. Żadna z tych metod nie jest zła — ważne, żeby wybrać jedną i trzymać się jej konsekwentnie w całym projekcie.

Gdy ustawiasz elementy jako inline-block, żeby stały obok siebie, w podglądzie pojawia się cienka szpara. To nie margines ani padding, których nie ustawiłeś. To efekt tego, jak przeglądarka traktuje białe znaki w kodzie HTML. Każdy enter, tabulator albo spacja między zamykającym a otwierającym znacznikiem staje się węzłem tekstowym. W trybie inline oraz inline-block taki węzeł renderuje się jak zwykła spacja — dokładnie taka, jaka powstałaby między dwoma słowami w akapicie. Stąd odstęp o szerokości jednej spacji, zwykle kilka pikseli.

Auto-fill kontra auto-fit — gdzie leży różnica Obie wartości powtarzają tyle kolumn, ile się zmieści, ale zachowują się inaczej, gdy kontener jest szerszy niż suma minimalnych szerokości. auto-fill tworzy puste tory i zostawia je w siatce — karty zajmują tylko część miejsca, a reszta świeci pustkami. auto-fit zwija puste tory do zera i rozciąga istniejące karty na całą dostępną szerokość. Efekt: przy auto-fill karty trzymają się lewej strony, przy auto-fit wypełniają wiersz po całości. Wybór zależy od tego, czy chcesz stałą szerokość kart, czy elastyczne rozciąganie.

Pierwszy typowy błąd to zapisywanie grafiki z ostrymi krawędziami (tekst, logotypy, ikony) w formacie JPEG. Ten format nie nadaje się do takich obrazów. Nawet przy wysokiej jakości (np. 90–95) na krawędziach pojawią się artefakty, bo algorytm zawsze coś odrzuci. Drugi błąd: zbyt mocna redukcja jakości „na oko" – patrzysz na cały obraz, a nie na powiększenie krawędzi. Trzeci: wielokrotne zapisywanie tego samego pliku JPEG. Każdy zapis to kolejna strata, a krawędzie degradują się lawinowo.

Zamiast walczyć z białymi znakami, można zmienić model układu. Flexbox na kontenerze rodzica całkowicie eliminuje ten problem, bo elementy przestają być inline, a stają się elementami układu elastycznego. To obecnie najbezpieczniejsze rozwiązanie, zwłaszcza gdy elementy mają się rozciągać, zawijać albo wyrównywać w pionie. Inline-block nadal ma sens w prostych przypadkach, na przykład dla elementów, które muszą zachowywać się jak tekst i jednocześnie przyjmować wymiary.

Typowy błąd to wpisanie minmax(240px, 240px) zamiast minmax(240px, 1fr). Wtedy karty mają sztywną szerokość i nigdy nie wykorzystają wolnego miejsca — siatka wygląda jak niedokończona. Drugi częsty problem: zapomnienie o gap. Bez odstępów karty zlewają się w jedną plamę, a przy auto-fit trudno dostrzec, gdzie kończy się jedna, a zaczyna druga. Warto też pamiętać, że minmax() przyjmuje wartości procentowe, ale procenty odnoszą się do szerokości kontenera, nie do kolumny — mieszanie jednostek bywa źródłem zaskoczeń.

Kolejna pułapka to mieszanie width z flex-basis. Gdy oba są ustawione, flex-basis wygrywa, a width staje się ignorowane w obliczeniach. Efekt bywa mylący: zmieniasz szerokość, a nic się nie dzieje. Zamiast zgadywać, ustaw jedną wartość bazową i dopiero potem reguluj kurczenie i rozciąganie. Warto też pamiętać, że flex-shrink działa tylko w głównej osi — przy flex-direction: column kurczy wysokość, nie szerokość.

Jak pozbyć się przerwy bez psucia kodu Pierwszy sposób to usunięcie białych znaków z HTML. W praktyce oznacza to sklejenie znaczników w jednej linii:
...

...
. Działa, ale kod staje się nieczytelny, a przy formatowaniu przez edytor łatwo przypadkiem przywrócić spację. Druga metoda to komentarz między elementami:

. Komentarz zajmuje miejsce białego znaku, a przeglądarka go nie renderuje. Trzecia, najczystsza, to ustawienie na rodzicu font-size: 0 i przywrócenie normalnego rozmiaru czcionki wewnątrz elementów potomnych. Wtedy spacja ma zerową szerokość, a tekst w środku wygląda normalnie.

Jeśli karty mają różną wysokość, siatka wyrówna je do najwyższej w wierszu, co przy auto-fit daje równy rząd. Gdy chcesz, by każda karta rosła niezależnie, ustaw grid-auto-rows: minmax(180px, auto) i pozwól zawartości decydować o wysokości. Warto też dodać align-items: start, żeby karty nie rozciągały się na siłę. Całość sprowadza się do kilku linii CSS, które działają na każdej szerokości ekranu bez jednego zapytania o media.

Najkrótsza droga do siatki kart, która sama dostosowuje liczbę kolumn do szerokości ekranu, prowadzi przez trzy narzędzia: repeat(), minmax() i auto-fill albo auto-fit. Zapisuje się to w jednej linii: grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));. Ta deklaracja mówi przeglądarce: upakuj tyle kolumn o minimalnej szerokości 240 px, ile zmieści się w kontenerze, a wolną przestrzeń rozdziel równo między nie. Żadnego media query, żadnego breakpointu do pilnowania.