Edytujesz Flex a elementy blokowe: kiedy znika nowa linia w tekście

Na koniec drobiazg, który ratuje układ: grid-auto-rows: 1fr wyrówna wysokość kart w wierszu, a align-items: stretch sprawi, że przyciski i stopki wewnątrz kart wylądują na tej samej linii. Całość sprowadza się do trzech linijek CSS i jednego przemyślanego minmax(). Media query nie znikają z projektu całkowicie, ale przy siatce kart przestają być potrzebne.<br><br>Jak przewidzieć wynik i gdzie to boli Przy dwóch marginesach dodatnich wygrywa większy. Przy liczbach ujemnych wygrywa ten o większej wartości bezwzględnej, czyli bardziej „wciąga" element. Gdy jeden margines jest dodatni, a drugi ujemny, wartości się dodają: 30 pikseli i minus 10 pikseli daje 20 pikseli odstępu. Zasada jest jedna, ale konsekwencje zależą od kontekstu — dlatego warto sprawdzać układ w narzędziach deweloperskich, zamiast zgadywać z arkusza stylów.<br><br>Dwa sąsiadujące akapity mają po 20 pikseli marginesu. Oczekujesz 40 pikseli odstępu, a widzisz 20. To nie błąd przeglądarki ani twojego kodu. Tak działa zapadanie marginesów pionowych: przylegające marginesy pionowe nie sumują się, tylko nachodzą na siebie, a wynikiem jest wartość większa z dwóch. Dla 20 i 30 pikseli odstęp wyniesie 30, nie 50.<br><br>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>Drugie rozwiązanie to pozostawienie wiersza i dodanie flex-wrap: wrap. Wtedy elementy, które nie mieszczą się w jednej linii, przechodzą do kolejnej. Uwaga: zawijanie nie działa, jeśli elementy mają sztywne szerokości większe niż kontener, ani gdy użyjesz flex-shrink: 0 bez ograniczeń. W praktyce najpierw sprawdź, czy suma minimalnych szerokości nie przekracza dostępnego miejsca.<br><br>Pamiętaj też, że auto-fill i auto-fit nie tworzą siatki responsywnej same z siebie — reagują na szerokość kontenera, nie okna. Jeśli kontener jest zagnieżdżony w kolumnie innego gridu, to on wyznacza dostępne miejsce. Warto wtedy dodać min-width: 0 na rodzicu, żeby element mógł się kurczyć. Dzięki temu ten sam mechanizm sprawdzi się w wąskim panelu bocznym i na pełnym ekranie, bez pisania osobnych reguł.<br><br>Na koniec: nie ufaj automatycznym optymalizatorom, które „bezstratnie" zmniejszają rozmiar. Część z nich stosuje agresywne kwantyzacje, które psują krawędzie. Zawsze sprawdź wynikowy plik w powiększeniu, zanim go opublikujesz. Jeśli zależy Ci na jakości, wybierz format bezstratny dla grafiki z ostrymi elementami, a JPEG zostaw dla zdjęć, gdzie naturalne przejścia tonalne maskują drobne artefakty.<br><br>auto-fill kontra auto-fit — jedna litera, dwie różne siatki auto-fill tworzy tyle kolumn, ile się zmieści, nawet jeśli część z nich zostanie pusta. auto-fit zachowuje się podobnie, ale zwija puste tory do zera i rozciąga istniejące kolumny na całą szerokość. Efekt widać przy dwóch kartach na szerokim ekranie: z auto-fill zostaną wąskie i przytulone do lewej, z auto-fit rozjadą się na cały wiersz. Do galerii, gdzie liczy się równe wypełnienie, lepszy bywa auto-fit; do listy, która ma trzymać stałą szerokość kafelka — auto-fill. Warto sprawdzić oba warianty i wybrać świadomie, zamiast kopiować pierwszy z brzegu fragment.<br><br>Najczęstszy błąd to wpisanie samego repeat(auto-fill, 1fr) bez minmax(). Przeglądarka nie ma wtedy żadnej minimalnej szerokości, więc kolumny potrafią zapaść się do zera i karty znikają. Drugi częsty problem: za duża wartość minimalna. Jeśli ustawisz 320 px, a rodzic ma 300 px, siatka wypluje jedną kolumnę szerszą niż kontener i pojawi się poziomy pasek przewijania. Trzecia pułapka to sztywne odstępy — gap działa świetnie, ale marginesy na kartach dodają szerokość ponad minmax() i potrafią zepsuć obliczenia.<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>Flex-basis w procentach nie uwzględnia automatycznie odstępów. Jeśli ustawisz dwóm elementom flex: 0 0 50% i dodasz gap: 16px, suma przekroczy szerokość rodzica i elementy się zawiną albo zaczną się ściskać. Rozwiązanie: albo policz szerokość z uwzględnieniem gap, np. flex-basis: calc(50% - 8px) przy jednym odstępie, albo użyj flex: 1 1 0 i pozwól przeglądarce rozdzielić wolną przestrzeń. Pamiętaj też, że padding i border zwiększają rozmiar elementu, jeśli nie ustawisz box-sizing: border-box. Wtedy 50% plus padding daje więcej niż połowę rodzica i układ się rozjeżdża.