Piaskownica CSS Grid

Wizualnie testuj CSS Grid: grid-template-columns, grid-template-rows, gap, place-items i obszary. Podgląd na żywo, kopiuj kod CSS. Idealne do nauki i debugowania siatki.

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 siatki (Grid)

grid-template-columns

Zdefiniuj rozkład kolumn. Może być: `1fr 2fr 1fr`, `100px 1fr`, `repeat(3, 1fr)` itp.

Odstęp (gap) 12px

Szerokość kontenera 920px

Liczba komórek (items) 12

Styl tła podglądu

Format kodu wynikowego

Kolorystyka komórek

Tło komórki

Tekst komórki

Obramowanie komórki

Opcje dodatkowe

Pokazuj indeksy Komentarze w kodzie

Interaktywny podgląd siatki CSS Grid

Kod źródłowy

Kolumny

wyliczenie z szablonu dla bieżącej szerokości i odstępu; dla auto-fit/auto-fill to przybliżenie

Wiersze

liczba elementów podzielona przez kolumny, zaokrąglona w górę

Odstęp (gap)

12 px

Elementy

CSS GRID SNIPPET

/* Generated by Grid Template Columns Sandbox */
/* Paste the CSS into your stylesheet. Optionally copy the HTML into your page. */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  width: min(920px, 100%);
  max-width: 100%;
}

.grid .item {
  background-color: #eff6ff;
  color: #1e3a8a;
  border: 1px solid #3b82f6;
  border-radius: 12px;
  padding: 12px;
  min-height: 56px;
  display: grid;
  place-items: center;
  font-weight: 700;
}

/* Optional: subtle background for previews */
.preview-surface {
  background: rgba(13,110,253,.06);
  padding: 12px;
  border-radius: 14px;
}

/* HTML Example */
<div class="preview-surface">
  <div class="grid">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
    <div class="item">11</div>
    <div class="item">12</div>
  </div>
</div>

Ściąga: język grid-template-columns (z kodu narzędzia)

Zapisy, które obsługuje pole Szablon — dokładnie te, które podpowiada placeholder i generuje domyślny szablon
Zapis	Co robi
1fr 2fr 1fr	jednostka fr — frakcja wolnego miejsca w kontenerze; 2fr dostaje dwa razy więcej niż 1fr, proporcje 1:2:1
repeat(3, 1fr)	funkcja repeat() powtarza wzorzec torów N razy — trzy równe kolumny bez przepisywania
minmax(220px, 1fr)	tor elastyczny w zakresie: nie węższy niż 220 px, rozszerza się do udziału w wolnym miejscu (1fr)
repeat(auto-fit, minmax(220px, 1fr))	domyślny szablon narzędzia: tyle kolumn, ile zmieści się przy minimum 220 px, nadmiar elementów zawija do nowego wiersza — responsywność bez media queries
100px 1fr	miks toru stałego i elastycznego — np. sztywna kolumna boczna + reszta miejsca

Grid a flexbox w skrócie: flexbox układa elementy w jednym wymiarze (rzędzie albo kolumna) i rozmiary wynikają z zawartości; grid najpierw definiuje strukturę torów — kolumny i wiersze naraz — a elementy wpasowuje w nią. Do kart, galerii i layoutów stron wybieraj grid, do paseków narzędzi i grup przycisków flexbox.

Przykład wygenerowany silnikiem dla bieżącego formularza (tryb „Tylko CSS”, bez komentarzy):

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  width: min(920px, 100%);
  max-width: 100%;
}

.grid .item {
  background-color: #eff6ff;
  color: #1e3a8a;
  border: 1px solid #3b82f6;
  border-radius: 12px;
  padding: 12px;
  min-height: 56px;
  display: grid;
  place-items: center;
  font-weight: 700;
}

/* Optional: subtle background for previews */
.preview-surface {
  background: rgba(13,110,253,.06);
  padding: 12px;
  border-radius: 14px;
}

Warto wiedzieć — CSS Grid w praktyce

auto-fit vs auto-fill

Oba układają tyle kolumn, ile się zmieści przy minimum z minmax(). Różnica ujawnia się przy małej liczbie elementów: auto-fill tworzy puste tory (elementy zajmują te miejsca po kolei), a auto-fit zwija puste tory i rozciąga elementy na całą szerokość.

Jednostki w torach

Poza fr i px w torach działają też %, ch, em, rem i min()/max()/clamp(). Mieszanie jest w pełni legalne (100px 1fr) — stałe tory dają punkty zaczepienia, fr rozdaje resztę miejsca. Unikaj tylko sztywnych px dla całych layoutów responsywnych.

Gap zamiast marginesów

gap (odstęp) działa między torami i zastępuje klasyczny trik z ujemnymi marginesami: nie trzeba już odejmować odstępu od krawędzi kontenera. gap ustawia odstęp i między wierszami, i między kolumnami — możesz je rozdzielić zapisem row-gap / column-gap.

Dostępność i kolejność

Grid daje mocne narzędzia wizualne (grid-column, grid-row, order), ale kolejność czytania przez czytniki ekranu podąża za DOM, nie za wyglądem. Nie przestawiaj elementów w sposób zmieniający sens treści — zwykły auto-placement z podglądu narzędzia jest bezpieczny.

Oceń to narzędzie:

Powiązane narzędzia

Inne narzędzia, które mogą Ci się przydać

Piaskownica CSS Grid – naucz się layoutu przez eksperyment

CSS Grid to najpotężniejszy system layoutu w CSS – dwuwymiarowy, obsługujący zarówno kolumny jak i wiersze jednocześnie. Piaskownica pozwala wizualnie manipulować wszystkimi właściwościami Grid i natychmiastowo widzieć efekt – najszybszy sposób nauki.

piaskownica CSS Grid CSS Grid playground testuj grid-template-columns CSS Grid kalkulator

Właściwości kontenera Grid

display: grid | inline-grid. grid-template-columns: 1fr 2fr | repeat(3, 1fr) | minmax(200px, 1fr). grid-template-rows: analogicznie jak kolumny. grid-template-areas: "header header" "sidebar main" "footer footer". gap (row-gap, column-gap): odstępy między komórkami. place-items: skrót dla align-items + justify-items. place-content: skrót dla align-content + justify-content.

Właściwości elementów Grid

grid-column: 1 / 3 (od linii 1 do 3 = 2 kolumny). grid-row: 2 / 4. Skrót: grid-area: row-start / col-start / row-end / col-end. Dla areas: grid-area: header. justify-self / align-self: pozycja wewnątrz komórki. order: wizualna kolejność (jak w Flexbox).

Jednostka fr i funkcje

fr (fraction): 1fr = 1 część dostępnej przestrzeni. 1fr 2fr 1fr: środkowa kolumna 2× szersza. repeat(auto-fill, minmax(200px, 1fr)): responsywna siatka bez media queries – kolumny co najmniej 200px. repeat(auto-fit, ...): jak auto-fill ale usuwa puste tory. minmax(min, max): elastyczny rozmiar z granicami.

Grid Areas – layouty semantyczne

grid-template-areas pozwala nazwać obszary i przypisać elementy: header zajmuje całą górną część, main – centrum, sidebar – bok, footer – dół. Zmiana layoutu dla mobile: wystarczy redefinicja grid-template-areas w @media query – bez zmiany HTML!

Jak piaskownica przekłada wpisany grid-template na układ na żywo

Piaskownica CSS Grid działa jak miniature przeglądarki: pobiera wpisane przez Ciebie reguły CSS, tworzy z nich regułę dla kontenera i elementów potomnych, a następnie oddaje ją silnikowi layoutu. Ten sam silnik, który układa strony w przeglądarce, wylicza pozycje i rozmiary torów. Dzięki temu nie musisz zapisywać pliku ani odświeżać strony – każda zmiana w polu tekstowym od razu staje się nowym layoutem.

Najważniejsza część to sposób, w jaki grid-template-columns i grid-template-rows zamieniają dostępną przestrzeń na konkretne szerokości i wysokości. Wartości sztywne, np. 200px w minmax(200px, 1fr), są odejmowane od wolnego miejsca jako pierwsze. Reszta trafia do jednostek fr. Jeśli w kolumnach masz 1fr 2fr, suma części wynosi 3, więc pierwsza kolumna dostaje jedną trzecią wolnej przestrzeni, a druga dwie trzecie. Gdy użyjesz repeat(3, 1fr), wszystkie trzy kolumny są równe, bo każda reprezentuje tę samą część.

Piaskownica pokazuje też tory niejawne. Jeśli element ma grid-column: 1 / 3, ale w grid-template-columns zdefiniowano tylko jedną kolumnę, przeglądarka dorysuje brakujący tor. To dlatego warto patrzeć nie tylko na wpisane wartości, ale też na to, jak zmienia się liczba wierszy i kolumn. W trybie na żywo łatwiej wychwycić różnicę między jawnym grid-template a automatycznym rozmieszczeniem.

Przykład: testowanie responsywnej siatki z minmax i auto-fit

Przygotuj kontener i kilka elementów. W podglądzie umieść kontener z kilkoma prostokątami, które będą się zawijać. Na początku nie ustawiaj żadnych kolumn – zobaczysz zwykły pionowy stos.
Włącz grid. W polu display wpisz grid. Kontener stanie się siatką, ale przy jednym torze elementy nadal ułożą się jeden pod drugim.
Ustaw stałą liczbę kolumn. W grid-template-columns wpisz repeat(3, 1fr). Pojawią się trzy równe kolumny. Zmniejsz szerokość podglądu – kolumny będą się zwężać, ale nadal będą trzy.
Zamień na minmax. Wpisz repeat(auto-fill, minmax(200px, 1fr)). Teraz liczba kolumn zależy od szerokości podglądu. Każda kolumna ma co najmniej 200px, a gdy brakuje miejsca, siatka przechodzi do kolejnego wiersza. Puste tory po prawej stronie zostają zarezerwowane.
Porównaj auto-fit. Zmień auto-fill na auto-fit w tym samym zapisie. Przy tej samej szerokości puste tory znikają, więc istniejące kolumny mogą się rozciągnąć na całą dostępną przestrzeń.
Sprawdź linie i przypisania. Dodaj do jednego elementu grid-column: 1 / 3 i zobacz, jak zajmuje dwie kolumny. To pokazuje różnicę między samym grid-template a rozmiarowaniem elementów.

Szybka referencja: co wpisać w grid-template-columns i co zobaczysz

Wpis w grid-template-columns	Liczba kolumn	Efekt w podglądzie
1fr	1	Jedna kolumna zajmująca całą dostępną szerokość.
1fr 2fr	2	Dwie kolumny: pierwsza dostaje 1 część, druga 2 części wolnej przestrzeni.
repeat(3, 1fr)	3	Trzy równe kolumny, każda o tej samej szerokości.
minmax(200px, 1fr)	1	Jedna kolumna o szerokości co najmniej 200px, która może rosnąć.
repeat(auto-fill, minmax(200px, 1fr))	zmienna	Tyle kolumn, ile zmieści się przy minimum 200px; puste tory pozostają.
repeat(auto-fit, minmax(200px, 1fr))	zmienna	Jak auto-fill, ale puste tory są usuwane, więc kolumny się rozciągają.
1fr 1fr 1fr	3	Trzy równe kolumny – równoważne z repeat(3, 1fr).

Jak efektywnie testować grid-template w piaskownicy

Zmieniaj jedną właściwość naraz. Jeśli poprawiasz i kolumny, i wiersze, i gap, trudno ustalić, co dało efekt. Zacznij od grid-template-columns, potem dodaj grid-template-rows.
Używaj repeat do powtarzalnych torów. Zamiast wypisywać 1fr 1fr 1fr, wpisz repeat(3, 1fr). Łatwiej wtedy zmienić liczbę kolumn i od razu zobaczyć różnicę.
Testuj minmax(200px, 1fr) przy różnych szerokościach. To najszybszy sposób, by zrozumieć, kiedy siatka się zawija, a kiedy tylko zwęża. Przeciągnij krawędź podglądu i obserwuj liczbę kolumn.
Porównuj auto-fill z auto-fit. Obie wartości dają responsywność bez media queries, ale inaczej traktują puste miejsce. Różnicę widać najlepiej, gdy elementów jest mniej niż dostępnych torów.
Zapisuj działające fragmenty. Gdy układ zachowa się zgodnie z oczekiwaniem, skopiuj cały wpis z grid-template-columns albo grid-template-areas, aby nie odtwarzać go od zera.

Ograniczenia piaskownicy i czynniki, które zaburzają wynik

Podgląd nie zna Twojej treści. Piaskownica pokazuje siatkę na przykładowych elementach. W prawdziwym projekcie długie słowa, obrazy i tabele mogą rozsadzić tory albo wymusić przewijanie.
Wynik zależy od szerokości podglądu. Jednostki fr, auto-fill i auto-fit reagują na dostępne miejsce. Ten sam zapis może wyglądać inaczej na wąskim i szerokim ekranie.
Nie zastępuje testów w przeglądarce. Różnice w renderowaniu, zoom, paski przewijania i ustawienia systemowe mogą wpływać na finalny układ. Piaskownica to szybszy start, nie ostateczna weryfikacja.
Nie pokazuje pełnego kontekstu. Nested grids, writing-mode, direction oraz kolejność DOM poza order mogą zmienić zachowanie siatki. W piaskownicy testujesz zwykle wyizolowany przypadek.

Najczęstsze pytania

Flexbox czy Grid – co wybrać?

Grid: 2-wymiarowy layout (np. strona z nagłówkiem, sidebarem, mainem, stopką). Flexbox: 1-wymiarowy (rząd przycisków, lista kart). Można łączyć: Grid dla makrolayoutu strony, Flexbox dla komponentów wewnątrz siatki. W nowoczesnym CSS używaj obydwu – nie są konkurencyjne.

Co robi 1fr a co auto?

fr: proporcjonalny udział wolnej przestrzeni. auto: rozmiar zawartości (jak min-content, chyba że jest dodatkowe miejsce – wtedy rośnie). grid-template-columns: auto 1fr auto: środkowa kolumna zajmuje całe dostępne miejsce, boczne dopasowują się do treści.

Jak zrobić responsywną siatkę produktów bez media queries?

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)). auto-fill: tworzy tyle kolumn ile się zmieści. minmax(250px, 1fr): każda min 250px, max 1fr. Przy 800px szerokości: 3 kolumny. Przy 500px: 2. Przy 250px: 1. Zero media queries.

Co to jest subgrid?

CSS Subgrid (Chrome 117+, Firefox 71+): element może dziedziczyć linie siatki rodzica. grid-template-columns: subgrid. Pozwala na wyrównanie treści wewnątrz zagnieżdżonych elementów do linii zewnętrznej siatki – przełom dla złożonych kart.

Jak debugować CSS Grid w Chrome DevTools?

Elements tab → zaznacz element z display:grid → pojawi się znacznik "grid". Kliknij → aktywacja nakładki siatki (linie, numery kolumn/wierszy, nazwy obszarów). Elementy panelu Layout (prawy panel): zarządzaj nakładkami wielu siatek jednocześnie.

Jak działa grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))?

Przeglądarka tworzy tyle kolumn, ile zmieści się w dostępnej szerokości przy minimalnej szerokości 200px. Każda kolumna może urosnąć do 1fr, ale puste tory po prawej stronie pozostają zarezerwowane, więc elementy nie rozciągają się na całą szerokość, jeśli jest ich mniej.

Czym różni się 1fr od auto w grid-template-columns?

1fr oznacza proporcjonalny udział w wolnej przestrzeni, a auto dopasowuje rozmiar do zawartości i może pozostać mniejszy niż reszta. W praktyce 1fr dobrze działa do elastycznych kolumn, a auto do elementów, których szerokość wynika z treści.

Dlaczego moje kolumny nie mają równej szerokości, mimo że wpisałem 1fr?

Najczęściej w kontenerze są inne wartości, np. 1fr 2fr, albo dochodzą stałe szerokości i gap, które są odejmowane przed podziałem fr. Sprawdź cały wpis grid-template-columns oraz to, czy elementy nie mają własnych grid-column.

Czy piaskownica CSS Grid działa na telefonie?

Tak, o ile przeglądarka mobilna obsługuje CSS Grid – a robi to praktycznie każda współczesna. Na małym ekranie wygodniej jednak testować pojedyncze właściwości, bo podgląd jest węższy i układ może częściej się zawijać.

Jak przetestować grid-template-areas w piaskownicy?

Wpisz w kontenerze grid-template-areas z nazwami obszarów, np. 'header header' 'sidebar main' 'footer footer', a elementom nadaj grid-area: header, sidebar, main lub footer. W podglądzie zobaczysz, jak nazwy układają się w siatkę i jak zmienia się ona po edycji.

Powiązane narzędzia: piaskownica Flexbox, konwerter em/rem na piksele i generator tooltipów CSS.