Gdy jedna kolumna rośnie za bardzo, użyj jednostki fr w CSS Grid

Na co uważać? Po pierwsze, nie myl odstępu od białych znaków z domyślnym marginesem elementów. Po drugie, przy font-size: 0 pamiętaj o dzieciach — ich rozmiar czcionki musisz przywrócić, inaczej tekst zniknie. Po trzecie, nie ustawiaj szerokości 33,33% bez uwzględnienia przerwy, bo nawet najmniejsza spacja zepsuje układ. Najbezpieczniej jest albo usunąć białe znaki, albo przejść na flexbox.

Praktyczna rada: zaczynaj od minmax(0, 1fr) dla każdej elastycznej kolumny, a stałe wymiary stosuj tylko tam, gdzie naprawdę są potrzebne — np. na ikonę albo wąską kolumnę nawigacji. Jeśli układ ma się zmieniać wraz z szerokością, użyj auto-fit lub auto-fill zamiast ręcznego przepisywania liczby kolumn w media queries. Pamiętaj, że fr nie działa w flexbox — to wyłącznie mechanizm siatki. W flexie wolną przestrzeń rozdziela się przez flex-grow, co bywa mniej przewidywalne przy różnej zawartości.

Warto też pamiętać o kolejności w arkuszu: warunki dla szerszych widoków muszą znajdować się po stylach bazowych. Jeśli wrzucisz je wyżej, oświetlenie w salonie kaskada je nadpisze i przestaną działać. Nie chodzi o to, żeby zawsze zaczynać od telefonu, ale żeby decyzję o kolejności podejmować świadomie. W większości projektów, gdzie treść jest najważniejsza, styl bazowy dla wąskiego ekranu jest po prostu mniejszym ryzykiem.

Scalanie komórek robi się atrybutami colspan i rowspan. Tu zaczynają się problemy, bo przeglądarka liczy kolumny na podstawie wszystkich wierszy. Jeśli w jednym wierszu scalisz dwie komórki w poziomie, w kolejnych wierszach musisz dostarczyć odpowiednią liczbę pozostałych komórek. Niedobór lub nadmiar komórek rozjeżdża całą tabelę, a błąd bywa trudny do zauważenia, gdy treść jest krótka. Zasada jest prosta: przed pisaniem kodu ustal, ile kolumn ma mieć najszerszy wiersz, i pilnuj tej liczby w każdym kolejnym wierszu.
Kiedy fr zawodzi i jak to obejść Jednostka fr uwzględnia minimalną szerokość treści, jeśli nie ustawisz min-width: 0 na elemencie siatki. Domyślnie element grid ma min-width: auto, więc długi ciąg znaków bez spacji albo duży obraz mogą rozepchnąć kolumnę ponad podział. Objawia się to poziomym paskiem przewijania albo nierównymi kolumnami mimo zapisu 1fr 1fr. Naprawa jest prosta: min-width: 0 na dzieciach siatki albo overflow: hidden na samej kolumnie, jeśli przycinanie jest akceptowalne. Uważaj też na gap — odstępy są odejmowane przed podziałem, więc przy wielu kolumnach realna szerokość treści bywa mniejsza, niż sugeruje proporcja.

Reguła jest prosta: najpierw piszesz style dla najwęższego widoku, a dopiero potem dodajesz warunki dla szerszych ekranów. W praktyce oznacza to, że cała podstawa arkusza stylów opisuje układ jednokolumnowy, bez zapytań o szerokość. Dopiero gdy ten układ działa poprawnie, dopisujesz @media (min-width: …) i w nim zmieniasz liczbę kolumn, szerokości i odstępy. Odwrotna kolejność, czyli zaczynanie od szerokiego widoku i nadpisywanie go przy zwężaniu, prawie zawsze kończy się walką z kaskadą.

Praktyczna rada: Should you have virtually any inquiries with regards to in which along with the way to utilize WykońCzenie Wnętrz, it is possible to email us on our web site. nie ustawiaj width i flex-basis obok siebie bez powodu. Wybierz jedno źródło rozmiaru bazowego. Jeśli chcesz elastyczny element z minimalnym rozmiarem, użyj flex: 1 1 200px i dodaj min-width, zamiast liczyć na to, że width coś jeszcze naprawi. Pamiętaj też, że box-sizing: border-box obejmuje padding i obramowanie, więc wartości bazowe nie sumują się z nimi w sposób, którego często oczekują początkujący.

Gdy ustawiasz kilka elementów obok siebie jako display: inline-block, w przeglądarce pojawia się między nimi niewielka przerwa. To nie margines ani padding — to efekt działania białych znaków w kodzie HTML. Przeglądarka traktuje znak nowej linii, spację czy tabulator między znacznikami tak samo jak pojedynczą spację w tekście. Ta spacja ma szerokość równą szerokości odstępu w użytej czcionce, dlatego przy mniejszym rozmiarze pisma przerwa jest mniejsza, a przy większym — większa.

Stos czcionek w CSS to lista wariantów oddzielonych przecinkami. Przeglądarka bierze pierwszy, który znajdzie w systemie użytkownika. Problem w tym, że nie widzisz, który to był — zwłaszcza gdy różnice między krojami są subtelne albo gdy brakuje kilku z listy. Zamiast zgadywać, sprawdź to narzędziami, które masz pod ręką.

Inne podejście to rezygnacja z inline-block na rzecz flexboxa. Wystarczy na kontenerze ustawić display: flex, a przerwy znikną same. To rozwiązanie jest odporne na białe znaki i nie wymaga hacków. Jeśli jednak musisz zostać przy inline-block, możesz też zastosować ujemny margines, ale to metoda krucha — wartość zależy od czcionki i może wymagać korekty przy każdej zmianie stylu.

Dlaczego tak? Bo w CSS wygrywa reguła późniejsza i bardziej szczegółowa. Gdy bazą jest widok szeroki, każdy warunek dla telefonu musi nadpisywać wiele właściwości naraz — szerokości, marginesy, pozycjonowanie, a czasem cały grid. Zapomina się o jednej i układ się rozjeżdża. Przy stylu bazowym dla wąskiego ekranu warunki dla szerszych widoków tylko dodają nowe możliwości, nie muszą niczego naprawiać.