Co się dzieje, gdy grid-template-columns ustawisz na sztywno

Osobny problem to nagłówki ukryte wizualnie, dodane tylko po to, by spełnić wymagania dostępności. Jeśli sekcja naprawdę nie ma tytułu, lepiej zmienić strukturę niż wstawiać niewidoczny h2. Czytnik ekranu odczyta go jako realny nagłówek i użytkownik będzie się zastanawiał, do czego należy. Zamiast tego użyj atrybutu aria-label na sekcji albo po prostu połącz mniejsze bloki w jeden sensowny fragment.

Trzeci błąd dotyczy grid-auto-flow. Domyślnie elementy wypełniają siatkę wierszami. Jeśli ustawisz grid-auto-flow: column, a zdefiniujesz tylko kolumny, elementy pójdą w prawo i wygenerują wiersze poza Twoją kontrolą. Warto też pamiętać, że grid-template-columns działa tylko na bezpośrednich dzieciach kontenera siatki. Element zagnieżdżony głębiej nie widzi tych torów, dopóki sam nie stanie się kontenerem grid.

Wiersze ustawiasz analogicznie przez grid-template-rows, ale rzadko potrzebujesz ich z góry. Wystarczy grid-auto-rows, żeby kolejne wiersze miały sensowną wysokość, np. grid-auto-rows: minmax(80px, auto). Pamiętaj, że wysokość wiersza zależy od najwyższego dziecka w danym rzędzie — jedno długie zdanie potrafi rozepchnąć cały pas i zepsuć wyrównanie. Jeśli to problem, ustaw align-items: start na kontenerze, żeby elementy nie rozciągały się na całą wysokość komórki.

Najczęstszy błąd to sztywne piksele przy zmiennej szerokości okna. Trzy kolumny po 300 pikseli w kontenerze o szerokości 600 pikseli nie zmieszczą się i wywołają poziomy pasek przewijania. Drugi typowy problem: zapominasz o gap i odstępy robisz marginesami na dzieciach. Marginesy rozjeżdżają siatkę, bo dokładają się do szerokości komórek, a gap działa na przerwach między torami i nie wpływa na ich rozmiar.

Typowy błąd to mieszanie formatów bez zrozumienia różnic. rgb(100%, 0%, 0%) jest poprawne, ale rgb(256, 0, 0) już nie — wartości powyżej 255 są obcinane do 255. W HSL odcień podaje się w stopniach od 0 do 360; wpisanie 400 nie zepsuje koloru, ale zostanie zredukowane. Kolejna pułapka to brak spacji w nowszych składniach — rgb(255,0,0) działa, ale rgb(255 0 0) też jest poprawne, natomiast rgb(255, 0 0) z mieszanymi separatorami może zostać odrzucone. Warto trzymać się jednego stylu w całym projekcie.

Kolor w CSS można zapisać na kilka sposobów, a każdy z nich ma inne zastosowanie. Najprostsze są nazwy słowne, takie jak red, blue czy tomato. Przeglądarka zna ich ponad 140, ale nie wszystkie są intuicyjne — gainsboro to jasny szary, a rebeccapurple to średni fiolet. Nazwy sprawdzają się w prototypach i prostych projektach, jednak przy precyzyjnym odwzorowaniu designu lepiej użyć zapisu liczbowego. Uwaga na literówki: gray i grey to ten sam kolor, ale już darkgray i darkgrey też działają, natomiast błędna nazwa jest ignorowana i element przyjmuje kolor odziedziczony.

Fr, repeat i minmax zamiast sztywnych pikseli Jednostka fr dzieli wolną przestrzeń kontenera. Zapis grid-template-columns: 1fr 2fr daje dwie kolumny, z których druga jest dwa razy szersza od pierwszej. Do powtarzalnych układów służy repeat(3, 1fr). Z kolei minmax(200px, 1fr) mówi: kolumna ma mieć co najmniej 200 pikseli, a resztę przestrzeni niech zajmie proporcjonalnie. Tak powstają siatki, które nie rozsypują się na wąskim ekranie, bez pisania ani jednego media query.

RGB i HSL — kiedy kanały mówią więcej niż szesnastki Zapis rgb() przyjmuje trzy liczby od 0 do 255, np. rgb(255, 0, 0) to czerwony. Można dodać czwarty parametr alfa w rgba(), np. rgba(255, 0, 0, jak urządzić małą kuchnię 0.5) dla półprzezroczystości. Od pewnego czasu przeglądarki obsługują też rgb(255 0 0 / 0.5) z ukośnikiem, co upraszcza składnię. HSL działa inaczej: hsl(0, 100%, 50%) oznacza odcień 0 stopni (czerwony), pełne nasycenie i średnią jasność. Zaleta HSL polega na tym, że łatwo tworzyć warianty tego samego koloru — wystarczy zmienić jasność lub nasycenie, In case you beloved this short article and you want to get more information regarding lebenskunst.berlin generously check out our site. nie ruszając odcienia. To przydatne przy motywach i stanach przycisków.

Rodzaj ogólny (ang. generic family) na końcu listy font-family to nie ozdoba ani zapasowe koło ratunkowe, które „może się kiedyś przyda. To instrukcja dla przeglądarki, co ma zrobić, gdy nie znajdzie żadnej z wcześniej wymienionych czcionek. Bez niego silnik renderujący sięga po domyślną czcionkę przeglądarki, a ta bywa zupełnie inna, niż zakładał projekt.

Najważniejszą właściwością przy starcie jest grid-template-columns. Wpisujesz w niej listę wartości rozdzielonych spacjami, a każda wartość opisuje szerokość kolejnej kolumny. Prosty zapis grid-template-columns: 200px 1fr 1fr tworzy trzy kolumny: pierwsza ma stałe 200 pikseli, pozostałe dzielą resztę miejsca po równo. Jednostka fr oznacza ułamek wolnej przestrzeni — nie piksele, nie procenty, tylko proporcję. To najczęstsze źródło nieporozumień, bo 1fr nie znaczy „tyle samo co sąsiad", dopóki nie policzysz wszystkich kolumn.