Preskoči na glavno vsebino
LibraTool logoLibraTool

Generator CSS Grid — brezplačno

Vizuelno oblikujte CSS mrežo — sledenje, enote in vrzeli — in kopirajte generirani CSS in HTML.

Deluje brez povezave po nalaganju
Prednastavitve
Stolpci (3)
Vrstice (2)
Predogled v živo
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>

🔒 Vse se izvaja v brskalnik — nič se ne napiše.

Kako deluje

Vizualno zasnujte CSS mrežo: dodajte do 8 stolpcev in 8 vrstic, nastavite vsako stopnjo na fr, px, auto ali min/max-content ter prilagodite razmike vrstic/stolpcev. Oštevilčen živ predogled se takoj posodobi, ustvarjen CSS grid-template plus ujemajoč HTML pa sta en klik od vašega odložišča.

  1. 1
    Oblikujte mrežo
    Dodajte/odstranite stolpce in vrstice z + in −.
  2. 2
    Nastavite stopnje
    Vsak stolpec in vrstica dobi svojo enoto (1fr, 100px, auto…).
  3. 3
    Uglasite razmike
    Ločena drsnika za razmik vrstic in stolpcev.
  4. 4
    Kopirajte kodo
    Za produkcijo pripravljen CSS in ujemajoč ogrodni HTML.

Vse teče v vašem brskalniku — nič se ne naloži.

Sorodna orodja

↔️

Generator CSS Flexbox

Poskušite z flex smerjo, zavitkem, justificiranjem in poravnavo na živih predmetih — in kopirajte CSS.

Poskusite
📐

Generator CSS clamp()

Ustvarite tekočo vrednost CSS clamp() za odzivno tipografijo in razmike. Nastavite minimalno/maksimalno velikost in obseg vidnega polja, oglejte si živi predogled in kopirajte enolinijski CSS.

Poskusite
📓

Papir za tiskanje — črtast, karirast, pikast in notni (PDF)

Natisnite lasten papir: črtast (široke ali študentske črte), karirast, pikast, izometričen, za vajo pisave, notne črtovje ali zapiski po metodi Cornell, v A4, Letter, A5 ali Legal, v katerikoli barvi črt in s toliko stranmi, kolikor jih potrebujete. Oster vektorski PDF, narejen v vašem brskalniku.

Poskusite

Pogosto zastavljena vprašanja