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

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>

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!

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.

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