Ugrás a fő tartalomra
LibraTool logoLibraTool

Ingyenes CSS Grid generátor

Vizuálisan tervezzen meg egy CSS gridot — sávok, egységek és hézagok — és másolja ki a generált CSS-t és HTML-t.

Betöltés után offline is működik
Előbeállítások
Oszlopok (3)
Sorok (2)
Élő előnézet
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>

🔒 Minden a böngészőjében fut — semmi nincs feltöltve.

Hogyan működik

Tervezz meg vizuálisan egy CSS rácsot: adj hozzá akár 8 oszlopot és 8 sort, állíts be minden sávot fr, px, auto vagy min/max-content értékre, és állítsd be a sor-/oszlopközöket. A számozott élő előnézet azonnal frissül, a generált grid-template CSS és a hozzá tartozó HTML pedig egy kattintással a vágólapodra kerül.

  1. 1
    Alakítsd ki a rácsot
    Oszlopok és sorok hozzáadása/eltávolítása + és − gombokkal.
  2. 2
    Állítsd be a sávokat
    Minden oszlop és sor saját mértékegységet kap (1fr, 100px, auto…).
  3. 3
    Hangold a réseket
    Külön row-gap és column-gap csúszkák.
  4. 4
    Másold ki a kódot
    Éles CSS és a hozzá tartozó HTML-váz.

Minden a böngésződben fut — semmi nincs feltöltve.

Kapcsolódó eszközök

↔️

CSS Flexbox generátor

Kísérletezzen a flex iránytal, becsomagolással, igazítással és helyzeti értékekkel az élő elemeken — és másolja ki a CSS-t.

Próbálja ki
📐

CSS clamp() generátor

Generálj folyékony CSS clamp() értéket reszponzív tipográfiához és közbeiktatáshoz. Állítsd be a min/max méretet és a nézetablak-tartományt, tekintsd meg az élő előnézetet, és másold az egysoros CSS-t.

Próbálja ki
📓

Nyomtatható papír — vonalas, négyzethálós, pontrácsos és kottapapír (PDF)

Nyomtassa ki a saját papírját: vonalas (széles vagy college), négyzethálós, pontrácsos, izometrikus, írásgyakorló, kottapapír vagy Cornell-jegyzet, A4, Letter, A5 vagy Legal méretben, bármilyen vonalszínnel és annyi oldallal, amennyi kell. Éles vektoros PDF, a böngészőben készítve.

Próbálja ki

Gyakran ismételt kérdések