Generator wzorców siatki CSS
Twórz layouty CSS Grid wizualnie: definiuj kolumny, wiersze, gap i area. Pobierz gotowy kod CSS grid-template. Bezpłatnie.
-
1Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku. -
2Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce. -
3Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.
return "Wynik gotowy w 0.1s";
}
Typ siatki
Rozmiar kodu CSS
gotowy blok .grid-pattern do wklejenia w arkusz stylów
Kafelek siatki
background-size — odstęp między liniami/kropkami (6–240)
Krycie
alfa koloru rgba — im niżej, tym subtelniejsza siatka (0,01–1)
.grid-pattern {
background-color: #FFFFFF;
background-image: linear-gradient(to right, rgba(13, 110, 253, 0.18) 1px, transparent 1px), linear-gradient(to bottom, rgba(13, 110, 253, 0.18) 1px, transparent 1px);
background-size: 32px 32px;
}
| Wzór | background-image (z silnika) | Mechanizm |
|---|---|---|
| Siatka liniowa | linear-gradient(to right, rgba(13, 110, 253, 0.18) 1px, transparent 1px), linear-gradient(to bottom, rgba(13, 110, 253, 0.18) 1px, transparent 1px) | dwie warstwy linear-gradient — pozioma i pionowa linia o grubości z formularza; razem tworzą krzyż linii powtarzany przez background-size |
| Siatka kropkowa | radial-gradient(circle, rgba(13, 110, 253, 0.18) 1px, transparent 1px) | radial-gradient(circle, …) — kropka o promieniu równym grubości (min. 1 px), powtarzana przez background-size na całym tle |
Trik: gradient CSS jest „obrazkiem” dla własności background-image, a background-size: 32px 32px zamyka go w jednym kafelku, który przeglądarka powiela na całym tle — zero JavaScriptu i zero plików PNG. Zakresy z formularza: rozmiar kafelka 6–240 px, grubość 1–12 px, krycie 0,01–1, wysokość podglądu 160–520 px.
Warto wiedzieć — siatki w tle CSS
Jak działa trik background-image
Funkcje linear-gradient i radial-gradient zwracają obrazek, więc mogą zasilać tło elementu. Background-size tnie go na powtarzalny kafelek (np. 32×32 px), który przeglądarka układa obok siebie — stąd siatka bez jednej linijki JS i bez ładowania obrazka.
Liniowa czy kropkowa
Krzyż linii pomaga wyrównywać layout i moduły podczas projektowania — sprawdza się w makietach i placeholderach. Kropki są spokojniejsze wizualnie i lepiej wyglądają jako stałe tło: notatniki, mapy myśli, tła sekcji hero.
Krycie i kontrast
Alfa w rgba (tu 0,01–1) decyduje o intensywności siatki. Siatka to dekoracja, nie treść — trzymaj ją wyraźnie ciemniejszą (subtelniejszą) niż tekst, żeby nie walczyła o uwagę. Kolor podajesz w HEX, silnik dokłada przezroczystość.
Wydajność
Gradient tła renderuje silnik CSS (zwykle na GPU) i nie generuje żadnych zapytań HTTP — w odróżnieniu od obrazka z siatką. Uważaj tylko z background-attachment: fixed: kafelkowane tło z paralaksą potrafi kosztować na słabszych urządzeniach mobilnych.
Oceń to narzędzie:
Powiązane narzędzia
Inne narzędzia, które mogą Ci się przydaćGenerator siatki CSS Grid – wizualny kreator layoutów CSS
CSS Grid Layout to potężny dwuwymiarowy system layoutu w CSS. Narzędzie generuje wizualnie grid-template-columns, grid-template-rows, gap i grid-template-areas – i produkuje gotowy kod CSS z podglądem na żywo, bez konieczności pamiętania składni.
Podstawy CSS Grid
CSS Grid: dwuwymiarowy layout (wiersze I kolumny jednocześnie). display: grid na kontenerze. grid-template-columns: 1fr 2fr 1fr (3 kolumny). grid-template-rows: 100px auto 50px (3 wiersze). gap: 16px (odstępy). fr: ułamek dostępnej przestrzeni. repeat(3, 1fr) = 3 równe kolumny. minmax(100px, 1fr) = min 100px, max 1fr.
Grid Template Areas
Wizualne definiowanie obszarów: grid-template-areas: "header header" "sidebar content" "footer footer". Elementy: header { grid-area: header; }. Zalety: czytelny layout, łatwa zmiana w media queries. Puste miejsce: "." (kropka) = puste pole. grid-area: rowstart / colstart / rowend / colend (shorthand).
Wyrównanie elementów w Grid
justify-items: wyrównanie elementów poziomo w komórce (start/end/center/stretch). align-items: wyrównanie pionowe. justify-content: wyrównanie całej siatki poziomo. align-content: pionowo. place-items: shorthand (align/justify). Indywidualnie: justify-self i align-self na elementy dziecka.
Auto-fill i Auto-fit
repeat(auto-fill, minmax(200px, 1fr)): responsywny grid bez media queries. auto-fill: tworzy tyle kolumn ile się zmieści. auto-fit: podobne, ale wypełnia pozostałą przestrzeń. Różnica: przy mniej elementach niż kolumnach auto-fit rozciąga, auto-fill zostawia puste. Goldilocks technique: minmax(MIN, 1fr) dla idealnej responsywności.
Jak generator zamienia układ na kod CSS
Generator nie przechowuje gotowego kodu CSS, tylko model siatki. Model to liczba kolumn i wierszy, sposób wyznaczania ich rozmiaru (piksele, fr, auto, repeat, minmax) oraz wartość odstępu gap. Kiedy zaznaczasz komórki na planszy i łączysz je w obszary, każda taka operacja zmienia model — dopiero z niego powstaje tekst wynikowy. Dzięki temu ten sam układ można zapisać raz w pikselach, a raz we frakcjach, bez rysowania go od nowa.
Z modelu powstają dwa rodzaje deklaracji. Pierwszy opisuje tory: grid-template-columns i grid-template-rows. Drugi to mapa obszarów grid-template-areas, czyli tablica o wymiarach liczba wierszy na liczbę kolumn, w której każda komórka zawiera nazwę obszaru albo kropkę. Liczba nazw w każdym wierszu mapy musi być równa liczbie kolumn, a liczba wierszy mapy — liczbie wartości w grid-template-rows. Dla każdego elementu wstawionego na planszę generator dopisuje osobno regułę z grid-area: nazwa.
Podgląd na żywo działa na tej samej zasadzie: po każdej zmianie model jest od nowa zamieniany na CSS i wstawiany do dokumentu podglądu, dlatego suwak gap i zmiana liczby kolumn są widoczne natychmiast. Nazwy obszarów pełnią tu rolę klucza — jeśli dwa elementy dostaną tę samą nazwę, trafią do tej samej komórki i nałożą się na siebie, a nie ustawią obok siebie.
Przykład krok po kroku: nagłówek, sidebar, treść i stopka
- Ustaw liczbę kolumn na 3 i wpisz jako ich szerokości 1fr 2fr 1fr. Suma ułamków wynosi 4, więc środkowa kolumna zajmie połowę szerokości kontenera, a boczne po jednej czwartej.
- Ustaw trzy wiersze o wysokościach 100px auto 50px — nagłówek ma stałą wysokość, środkowy wiersz rośnie razem z treścią, stopka pozostaje niska i stała.
- Ustaw gap: 16px, żeby komórki nie sklejały się ze sobą.
- Zaznacz górny wiersz i połącz trzy komórki w jeden obszar o nazwie header. W drugim wierszu nadaj nazwę sidebar pierwszej kolumnie, a dwie pozostałe połącz w obszar content. Trzeci wiersz połącz w obszar footer.
- Odczytaj wynik: grid-template-areas: "header header header" "sidebar content content" "footer footer footer" oraz reguły typu header { grid-area: header; } i analogiczne dla sidebar, content i footer.
- Skopiuj cały blok do arkusza i sprawdź podgląd. Kontener musi mieć display: grid — bez tego żadna z pozostałych deklaracji nie zadziała.
Ściągawka: co generator zapisuje w CSS
| Deklaracja | Za co odpowiada | Przykład z planszy |
|---|---|---|
| grid-template-columns | Szerokości kolejnych kolumn | 1fr 2fr 1fr |
| grid-template-rows | Wysokości kolejnych wierszy | 100px auto 50px |
| gap | Odstępy między komórkami | 16px |
| repeat() | Skrót dla powtarzalnych torów | repeat(3, 1fr) |
| minmax() | Zakres od wartości minimalnej do maksymalnej | minmax(100px, 1fr) |
| grid-template-areas | Mapa nazwanych obszarów | "header header" "sidebar content" "footer footer" |
| grid-area | Przypisanie elementu do obszaru | grid-area: header |
| place-items | Skrót dla align-items i justify-items | place-items: center |
Jak pracować z generatorem, żeby kod był użyteczny
- Nazywaj obszary od roli, nie od pozycji. Nazwy pokroju header, sidebar, content, footer przetrwają zmianę układu, a nazwy typu lewy-gora trzeba poprawiać przy każdej modyfikacji.
- Ustal najpierw liczbę kolumn i wierszy. Zmiana liczby kolumn po narysowaniu obszarów unieważnia mapę grid-template-areas i wymaga ponownego zaznaczenia komórek.
- Zostawiaj puste pola kropką. Kropka jest pełnoprawnym wpisem w mapie obszarów — dzięki niej zachowasz regularną siatkę, gdy jakiś fragment ma zostać pusty.
- Sprawdzaj układ przy wąskim oknie. Szerokości zapisane we frakcjach i w minmax skalują się same, ale stałe wartości w pikselach mogą doprowadzić do przepełnienia kontenera.
- Kopiuj blok w całości. Sam grid-template-areas bez zgodnych grid-template-columns i grid-template-rows da inny układ niż w podglądzie.
Czego generator nie zrobi za Ciebie
- Nie sprawdzi wsparcia w przeglądarkach. Wygenerowany kod to standardowy CSS, ale ocena, czy dana funkcja zadziała w przeglądarce odbiorcy, należy do Ciebie.
- Nie dopisze media queries. Widok z podglądu odpowiada jednemu zestawowi warunków; warianty dla węższych i szerszych ekranów musisz zdefiniować samodzielnie.
- Nie obsłuży siatek zagnieżdżonych. Model opisuje jeden kontener i jego bezpośrednie elementy — zagnieżdżony grid w komórce trzeba dopisać ręcznie.
- Nie zna Twojej treści. Wiersze ustawione na auto rozciągają się zgodnie z zawartością, więc podgląd z przykładowymi napisami może wyglądać inaczej niż gotowa strona z długim tekstem lub obrazem.
Najczęstsze pytania
Jaka jest różnica między CSS Grid a Flexbox?
Flexbox: jednowymiarowy (wiersz LUB kolumna). CSS Grid: dwuwymiarowy (wiersze I kolumny). Kiedy Flexbox: nav menu, card row, centering. Kiedy Grid: główny layout strony, kompleksowe layouty 2D. Mogą być zagnieżdżone: Grid na layout strony, Flexbox dla elementów w komórkach. Nie konkurują – uzupełniają się.
Jak zrobić responsywny grid bez media queries?
repeat(auto-fit, minmax(280px, 1fr)): kolumny min 280px, max 1fr. Na małym ekranie: 1 kolumna. Na średnim: 2 kolumny. Na dużym: 3-4 kolumny. Automatycznie! Goldilocks technique. Alternatywnie: container queries (CSS @container) dla bardziej precyzyjnej kontroli wewnątrz komponentu.
Jak przenieść element na inną pozycję Grid?
grid-column: 2 / 4 (od kolumny 2 do 4, span 2). grid-row: 1 / 3 (span 2 wiersze). grid-column: span 2 (zajmuje 2 kolumny od aktualnej). Linie ujemne: grid-column: 1 / -1 (cała szerokość). order: jak w Flexbox (tylko wizualne, nie semantyczne). Niezależny od kolejności w HTML.
Jakie są najczęstsze błędy w CSS Grid?
Zapomnienie display: grid na kontenerze. Używanie grid-gap zamiast gap (przestarzałe). Mieszanie fr i px bez rozumienia: fr = po odjęciu stałych. Subgrid: zignorowane przez wielu (grid-template-columns: subgrid dla dzieci). Grid na inline elementach: grid działa tylko z block-level lub display:grid jawnie.
Jak debugować CSS Grid w DevTools?
Chrome/Firefox DevTools: Panel Elements → zaznacz grid element → overlay. Firefox: najlepsze narzędzie grid (kolorowe linie, numery, named areas). Chrome DevTools: "Grid" badge na elemencie, "Layout" panel z grid overlayem. Sprawdź: grid-template-columns rzeczywiste wartości, placement conflicts.
Czy generator siatki CSS zwraca gotowy plik CSS?
Zwraca blok deklaracji dla kontenera (display, kolumny, wiersze, gap, obszary) oraz osobne reguły dla elementów potomnych. Wklejasz go do swojego arkusza i dopisujesz resztę stylów.
Po co używać grid-template-areas, skoro można podać linie liczbami?
Mapa obszarów jest czytelna: od razu widać układ strony, a zmiana kolejności sekcji to zamiana nazw w dwóch miejscach, a nie przeliczanie numerów linii. Przy pracy zespołowej to zwykle mniej pomyłek.
Czy 1fr i 50% to to samo?
Nie. Wartość fr dzieli wolną przestrzeń kontenera po odjęciu odstępów i torów o stałym rozmiarze, a procent odnosi się do szerokości kontenera i nie uwzględnia gap w ten sam sposób.
Dlaczego układ nie działa po wklejeniu wygenerowanego kodu?
Najczęstsze przyczyny to brak display: grid na kontenerze oraz niezgodna liczba nazw obszarów w wierszach grid-template-areas względem liczby kolumn. Warto też sprawdzić, czy reguły grid-area są przypisane właściwym elementom.
Czy wygenerowaną siatkę można wykorzystać w responsywnym layoutcie?
Tak, ale sam generator nie tworzy wariantów dla różnych szerokości ekranu. Albo dopiszesz media queries z inną mapą obszarów, albo od razu użyjesz kolumn opartych na minmax, które dopasowują się do dostępnego miejsca.
Powiązane narzedzia: generator CSS Flexbox, generator animacji CSS i formatowanie CSS.