O tym narzędziu
CSS Grid Generator to darmowe narzędzie działające w przeglądarce, które za pomocą trzech prostych kontrolek — liczby kolumn, liczby wierszy i odstępu — tworzy gotowy do wklejenia układ CSS grid. Ustaw wartości, obserwuj przerysowywany na żywo podgląd i skopiuj wygenerowaną regułę.
Kolumny i wiersze to liczby całkowite od 1 do 12 (domyślnie 3 i 2), a odstęp to suwak od 0 do 40 pikseli (domyślnie 10). Oba wymiary są zapisywane za pomocą repeat() i jednostki 1fr, więc każdy tor dzieli dostępną przestrzeń równo. Podgląd wypełnia każdą komórkę ponumerowanym, kolorowym blokiem, dzięki czemu jednym rzutem oka widać strukturę torów, a wynikiem jest zwykła reguła .grid używająca display: grid, grid-template-columns, grid-template-rows oraz gap. Jedno kliknięcie kopiuje ją do schowka.
Wszystko działa w całości w przeglądarce — bez przesyłania, bez kont, bez śledzenia — i działa offline po wczytaniu strony.