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.

Bezpieczne (SSL)

Przetwarzanie Lokalne

100% Darmowe

Przejdź do narzędzia

Instrukcja

1

Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku.
2

Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce.
3

Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.

                                                function runTool() {

                                                  return "Wynik gotowy w 0.1s";

                                                }

Ustawienia

Wzór siatki

Rozmiar siatki (px) 32

Grubość linii/kropek (px) 1

Krycie / przezroczystość 0.18

Kolor siatki

Kolor tła

Wysokość podglądu (px) 320

Wynik

.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;
}

raw: 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) pattern: line grid size: 32 thickness: 1 opacity: 0.18 line color: #0D6EFD background color: #FFFFFF preview height: 320

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.

generator CSS Grid CSS grid layout grid-template-columns generator siatka CSS online

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.

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.

Powiązane narzedzia: generator CSS Flexbox, generator animacji CSS i formatowanie CSS.