Generator CSS Grid
Generator CSS Grid buduje układy siatki na podstawie liczby kolumn i wierszy, odstępów, opcjonalnych własnych wartości grid-template i wyrównania elementów, z podglądem na żywo i gotowym do skopiowania CSS.
O tym narzędziu
Generator CSS Grid buduje układy siatki na podstawie liczby kolumn i wierszy, odstępów, opcjonalnych własnych wartości grid-template i wyrównania elementów, z podglądem na żywo i gotowym do skopiowania CSS.
Jak używać
- Ustaw liczbę kolumn i wierszy.
- Dostosuj odstępy między kolumnami i wierszami.
- Opcjonalnie wpisz własne szablony, np. 200px 1fr 1fr.
- Wybierz justify-items i align-items, a potem kliknij Copy CSS.
Warto wiedzieć
- Jednostka fr dzieli wolną przestrzeń: 1fr 2fr daje drugiej kolumnie dwa razy większą szerokość niż pierwszej.
- repeat(3, 1fr) to skrót dla trzech równych kolumn.
- column-gap i row-gap ustawiają odstępy między ścieżkami siatki.
- Grid jest dwuwymiarowy — kontroluje jednocześnie wiersze i kolumny.
- repeat(auto-fit, minmax(200px, 1fr)) tworzy responsywną siatkę bez media queries.
Działa w całości w przeglądarce — nic, co wpiszesz, nie jest wysyłane ani zapisywane.
Najczęściej zadawane pytania
Jak zrobić siatkę z 3 kolumnami w CSS?
Użyj display: grid; grid-template-columns: repeat(3, 1fr); na kontenerze i dodaj gap dla odstępów.
Co oznacza fr w CSS Grid?
fr to ułamek dostępnej wolnej przestrzeni w kontenerze siatki.
CSS Grid czy Flexbox?
Grid najlepiej sprawdza się w układach dwuwymiarowych, takich jak struktura strony czy siatki kart; Flexbox w jednowymiarowych wierszach lub kolumnach.
Jak zrobić responsywną siatkę bez media queries?
Użyj grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); kolumny będą się wtedy same zawijać w zależności od dostępnego miejsca.