4 triki na siatkę kart, która sama się układa
Siatka kart zwykle zaczyna się od pytania: ile kolumn na jakim ekranie? Potem pojawiają się media query dla trzech, czterech, pięciu szerokości, a i tak przy dziwnej szerokości okna coś się rozjeżdża. Można to rozwiązać inaczej — za pomocą trzech właściwości CSS: repeat(), minmax() i auto-fill. Kontener sam decyduje, ile kart zmieści się w wierszu, a ty nie piszesz ani jednego zapytania o media.<br>
<br>
<br>
<br>
Osobny problem to strony osadzane w ramkach. Jeśli witryna jest wyświetlana w iframe na innym serwisie, znacznik viewport z dokumentu nadrzędnego nie działa. Trzeba zadbać o to, żeby dokument wewnątrz ramki miał własny poprawny meta viewport. W przeciwnym razie telefon potraktuje całą ramkę jak szeroką stronę i znów pokaże miniature.<br>
<br>
<br>
<br>
Flex-basis w procentach liczy się zawsze względem głównego rozmiaru kontenera rodzica. Jeśli rodzic ma flex-direction: row, procent odnosi się do szerokości. Przy flex-direction: column — do wysokości. To pierwsze miejsce, w którym ludzie się mylą, bo patrzą na oś, w której elementy są ułożone, a nie na to, co faktycznie jest bazą procentu. W praktyce: flex: 0 0 50% na dziecku kontenera z flex-direction: row da mu połowę szerokości rodzica, nawet jeśli sam element ma narzuconą inną szerokość — flex-basis wygrywa, dopóki width nie jest ustawione z wyższym priorytetem.<br>
<br>
<br>
<br>
Element w kontenerze flex potrafi nie zmniejszyć się mimo ustawienia flex-shrink na wartość większą od zera. Najczęstszą przyczyną jest minimalny rozmiar, który element sam narzuca. Domyślnie każdy element flex ma właściwość min-width ustawioną na auto. Oznacza to, że przeglądarka nie pozwoli mu zejść poniżej szerokości jego treści — najdłuższego nieprzerwanego słowa, obrazka bez ograniczeń czy szerokości pola formularza. Flex-shrink działa tylko wtedy, gdy element może się faktycznie zmniejszyć, a auto mu to blokuje.<br>
<br>
<br>
<br>
Podstawa wygląda tak: display: grid oraz grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)). Pierwszy argument mówi, ile razy powtórzyć wzorzec — auto-fill wylicza to na bieżąco na podstawie dostępnej szerokości. Drugi określa minimalną i maksymalną szerokość pojedynczej kolumny. Karta nigdy nie będzie węższa niż 240 px, a gdy miejsca jest więcej, kolumny równo dzielą wolną przestrzeń dzięki 1fr.<br>
<br>
<br>
<br>
Typowy błąd to dodawanie flex-shrink: 0, żeby „naprawić" układ, gdy element się rozjeżdża. To działa odwrotnie — element przestaje się kurczyć na stałe i zaczyna wypychać sąsiadów. Inny błąd to ustawianie flex: 1 bez min-width: 0. Skrót flex: 1 ustawia flex-shrink na 1, ale nie zmienia min-width, więc element nadal może mieć dolną granicę wynikającą z treści. Zapis flex: 1 1 0 plus min-width: 0 to najbezpieczniejszy zestaw do równomiernego kurczenia.<br>
<br>
<br>
<br>
Kolejny problem to zawartość. Flex-basis określa rozmiar początkowy, ale jeśli w elemencie jest długi tekst lub obraz, może on rozepchnąć układ. Wtedy flex-shrink zmniejszy elementy proporcjonalnie, ale nie zawsze zgodnie z planem. Aby temu zapobiec, stosuj min-width: 0 na elementach flex lub dodawaj overflow: hidden. Warto też testować w różnych przeglądarkach, bo interpretacja procentów w flex-basis bywała niespójna w starszych wersjach.<br>
<br>
<br>
<br>
Ustawianie flex-basis w procentach wydaje się proste: element ma zająć np. 50% szerokości kontenera. W praktyce procenty odnoszą się nie do szerokości rodzica, lecz do jego rozmiaru wzdłuż osi głównej. Jeśli kontener ma flex-direction: row, osią główną jest szerokość, więc 50% oznacza połowę szerokości. Gdy zmienisz kierunek na column, oś główna to wysokość i 50% odniesie się do wysokości kontenera. To najczęstsze źródło błędów.<br>
<br>
<br>
<br>
Poprawny zapis wygląda tak: . Wartość width=device-width mówi przeglądarce, żeby szerokość layoutu dopasowała się do szerokości ekranu w pikselach CSS. initial-scale=1 ustawia początkowe powiększenie na 100 procent, czyli bez automatycznego oddalania. Ta linia musi znaleźć się w sekcji head, przed jakimikolwiek arkuszami stylów i skryptami, które modyfikują układ. Jeśli wstawisz ją na końcu body, część przeglądarek może ją zignorować albo zastosować za późno, co objawia się mignięciem niewłaściwego widoku przy wczytywaniu.<br>
<br>
<br>
<br>
Co jeszcze warto dodać, a czego unikać Do podstawowej wersji często dopisuje się maximum-scale=1 lub user-scalable=no. To błąd. Blokowanie powiększania łamie dostępność: osoby słabowidzące nie mogą przybliżyć sobie tekstu, a przeglądarki mobilne coraz częściej ignorują ten zakaz. Wystarczy width=device-width i initial-scale=1. Jeżeli strona ma stały układ o znanej szerokości, można użyć width=1024, ale to rozwiązanie tymczasowe — przy zmianie orientacji na poziomą układ się rozjedzie, a przy węższych ekranach pojawi się poziomy pasek przewijania.