CSS Grid — podstawy i gotowe układy stron
Czym jest siatka, jak działa jednostka fr i jak bez media queries zbudować responsywną galerię kart.
Siatka w jednej regule
.siatka { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
Grid układa elementy jednocześnie w kolumnach i wierszach. Wartości wypróbujesz w generatorze CSS Grid.
Trzy częste układy
- Równe kolumny:
repeat(3, 1fr). - Panel i treść:
240px 1fr. - Karty:
repeat(auto-fit, minmax(200px, 1fr)).
Grid czy Flexbox
Do układu całej strony lub galerii zwykle lepszy jest Grid. Do menu i rzędu przycisków wygodniejszy bywa Flexbox, opisany w poradniku Flexbox — podstawy. Odstępy możesz podać w rem, korzystając z przelicznika px na rem, a cały układ zaplanuj według poradnika makieta strony.
Narzędzia do tego poradnika
Generator CSS Grid — siatka z podglądemProgramowanie i WWWUstaw kolumny, szerokość i odstępy, zobacz siatkę na żywo i skopiuj gotowy kod CSS Grid.Generator Flexbox CSS — układ z podglądemProgramowanie i WWWUstaw kierunek, wyrównanie, zawijanie i odstępy elementów, zobacz układ na żywo i skopiuj gotowy kod CSS.Konwerter px ↔ rem, em i pt (CSS)Programowanie i WWWPrzelicz piksele na rem (i odwrotnie) dla dowolnego rozmiaru bazowego czcionki, a także na punkty — z tabelą najczęstszych rozmiarów i gotowym kodem CSS.
CSSGridukład stronyfrontend
Przeczytaj też
Programowanie i tworzenie stronFlexbox w CSS — podstawy i gotowe układyProgramowanie i tworzenie stronSzybka makieta strony — rem, gradienty, placeholdery i Lorem ipsumProgramowanie i tworzenie stronIBAN i NRB — budowa numeru konta i bezpieczny przelewProgramowanie i tworzenie stronBłąd 404 i 500 — jak znaleźć przyczynę na swojej stronie