Przejdź do głównej treści
LibraTool logoLibraTool

Generator siatki CSS za darmo

Wizualnie zaprojektuj siatkę CSS — ścieżki, jednostki i przerwy — i skopiuj wygenerowany CSS i HTML.

Działa offline po wczytaniu
Ustawienia wstępne
Kolumny (3)
Wiersze (2)
Podgląd na żywo
1
2
3
4
5
6
css
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 16px;
}
html
<div class="container">
  <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>

🔒 Wszystko działa w przeglądarce — nic nie jest przesyłane.

Jak to działa

Projektuj siatkę CSS wizualnie: dodaj do 8 kolumn i 8 wierszy, ustaw każdą ścieżkę na fr, px, auto lub min/max-content i dostosuj odstępy między wierszami i kolumnami. Numerowany podgląd na żywo aktualizuje się natychmiast, a wygenerowany CSS grid-template wraz z odpowiednim HTML dzieli od schowka jedno kliknięcie.

  1. 1
    Ukształtuj siatkę
    Dodawaj i usuwaj kolumny oraz wiersze przyciskami + i −.
  2. 2
    Ustaw ścieżki
    Każda kolumna i wiersz ma własną jednostkę (1fr, 100px, auto…).
  3. 3
    Dostosuj odstępy
    Osobne suwaki row-gap i column-gap.
  4. 4
    Skopiuj kod
    Gotowy do produkcji CSS i odpowiedni szkielet HTML.

Wszystko działa w przeglądarce — nic nie jest przesyłane.

Powiązane narzędzia

↔️

Generator flexbox CSS

Eksperymentuj z kierunkiem flex, zawijaniem, justify i align na elementach na żywo — i skopiuj CSS.

Wypróbuj
📐

Generator CSS clamp()

Generuj płynną wartość CSS clamp() dla responsywnej typografii i odstępów. Ustaw minimalny/maksymalny rozmiar i zakres widoku, zobacz podgląd na żywo i skopiuj jednowierszowy CSS.

Wypróbuj
📓

Papier do druku — w linie, kratka, kropki i pięciolinia (PDF)

Wydrukuj własny papier: w linie (szerokie lub college), w kratkę, w kropki, izometryczny, do ćwiczenia pisma, pięciolinię lub notatki Cornell, w formacie A4, Letter, A5 lub Legal, w dowolnym kolorze linii i z tyloma stronami, ile potrzebujesz. Ostry wektorowy PDF tworzony w przeglądarce.

Wypróbuj

Często zadawane pytania