Auto-fill czy auto-fit: siatka kart, która sama się układa
Jak to działa w praktyce? minmax(240px, 1fr) wyznacza dolną i górną granicę toru. Gdy kontener ma 1000 px szerokości, zmieszczą się cztery kolumny po 240 px plus odstępy. Gdy zwęzi się do 500 px, zostaną dwie. Karty poniżej 240 px przestają się mieścić, więc siatka automatycznie redukuje ich liczbę. To właśnie ta zależność eliminuje potrzebę pisania osobnych reguł dla telefonu, tabletu i monitora.<br>
<br>
<br>
<br>
Zacznij od powiększenia newralgicznych miejsc – np. w edytorze grafiki ustaw widok na 400–800%. Jeśli widzisz rozmyte, poszarpane lub „wyprane" kontury, to znak, że kompresja była za silna. W przypadku plików JPEG sprawdź, czy nie są zapisane z jakością poniżej 80. Dla grafiki z tekstem lub cienkimi liniami użyj formatów bezstratnych: PNG lub WebP w trybie bezstratnym. Jeśli musisz użyć JPEG, zapisz obraz z maksymalną jakością (95–100) i nie otwieraj go ponownie do edycji – pracuj na pliku źródłowym (np. PSD, TIFF) i eksportuj dopiero na końcu.<br>
<br>
<br>
<br>
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.<br>
<br>
<br>
<br>
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.<br>
<br>
<br>
<br>
Przy responsywnych układach problem wraca przy zmianie szerokości okna. Elementy, które mieściły się w rzędzie, nagle się zawijają, bo spacja między nimi zjada kilka pikseli. Jeśli używasz inline-block, ustal szerokości z zapasem albo przejdź na flexbox. Testuj układ przy kilku szerokościach, bo biały znak bywa widoczny dopiero na granicy zmiany liczby elementów w wierszu.<br>
<br>
<br>
<br>
Praktyczna zasada: trzymaj jeden format w całym projekcie. Jeśli kolory pochodzą z projektu graficznego, zapis szesnastkowy bywa najwygodniejszy, bo tak są zwykle kopiowane. Jeśli budujesz paletę od zera i chcesz szybko testować warianty, hsl oszczędza czas. rgb przydaje się, gdy przezroczystość jest zmienna i liczona w kodzie. Mieszanie formatów bez powodu utrudnia wyszukiwanie i podmianę kolorów — zwłaszcza gdy ten sam odcień występuje w kilku miejscach w różnych zapisach.<br>
<br>
<br>
<br>
Najczęstsze błędy to kopiowanie reguły w inne miejsce bez usunięcia starej, dopisywanie zmian na końcu przypadkowego pliku oraz poleganie na kolejności tam, gdzie selektory mają różną specyficzność. Zamiast tego ustal jedną kolejność: najpierw style wspólne, potem komponenty, na końcu wyjątki. Gdy późniejsza linia nadpisuje wcześniejszą, sprawdź, czy to zamierzone. Jeśli nie — popraw selektor albo przenieś regułę, zamiast dodawać kolejną warstwę.<br>
<br>
<br>
<br>
Lista numerowana mówi: „to się dzieje po kolei". Sięgnij po nią, gdy kolejność ma znaczenie, bo od niej zależy efekt. Kroki procedury, etapy procesu, ranking od najważniejszego do najmniej istotnego — w tych miejscach numeracja jest jedynym sensownym wyborem. Uwaga na częsty błąd: numerowanie elementów, które są równorzędne, tylko po to, by „ładnie wyglądały". Jeśli przestawienie punktów nic nie zmienia, numer nie pełni żadnej roli i tylko myli. Drugi błąd to numerowanie listy, która ma więcej niż kilkanaście pozycji bez podziału na podgrupy — wtedy lepiej rozbić ją na kilka mniejszych lub zastosować nagłówki.<br>
<br>
<br>
<br>
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ń.<br>
<br>
<br>
<br>
Kolor w CSS można zapisać na kilka sposobów. Nazwy słowne, zapis szesnastkowy, rgb() i hsl() to cztery najczęstsze warianty. Każdy z nich prowadzi do tego samego efektu: przeglądarka zamienia wartość na kanały czerwony, zielony i niebieski. Różnica tkwi w tym, jak łatwo ci odczytać intencję, jak szybko poprawić odcień i czy wartość przetrwa kopiowanie między plikami.