Aqbeż għall-kontenut ewlieni
LibraTool logoLibraTool

Ġeneratur tas-CSS Grid b'xejn

Iddisinja CSS grid viżwalment — tracks, units u gaps — u kopja l-CSS u HTML ġenerati.

Jaħdem offline ladarba mgħobbi
Presets
Kolonni (3)
Ringieli (2)
Preview live
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>

🔒 Kollox jaħdem fil-browser tiegħek — xejn ma jitgħabba.

Kif Taħdem

Iddisinja grid CSS viżwalment: żid sa 8 kolonni u 8 ringieli, issettja kull binarju għal fr, px, auto jew min/max-content, u aġġusta l-vojt tar-ringieli/kolonni. L-anteprima ħajja innumerata tiġi aġġornata minnufih u s-CSS tal-grid-template iġġenerata flimkien mal-HTML li taqbel huma click wieħed mill-clipboard tiegħek.

  1. 1
    Forma l-grid
    Żid/neħħi kolonni u ringieli b'+ u −.
  2. 2
    Issettja l-binarji
    Kull kolonna u ringiela tikseb l-unità tagħha stess (1fr, 100px, auto…).
  3. 3
    Irfina l-vojt
    Slajders separati għall-vojt tar-ringieli u l-kolonni.
  4. 4
    Ikkopja l-kodiċi
    CSS lest għall-produzzjoni u l-iskeletru HTML li jaqbel.

Kollox jaħdem fil-browser tiegħek — xejn ma jitgħabba.

Għodod Relatati

↔️

Ġeneratur tas-CSS Flexbox

Sperimenta b'flex direction, wrap, justify u align fuq items live — u kopja l-CSS.

Ipprova
📐

Ġeneratur CSS clamp()

Iġġenera valur CSS clamp() fluwidu għal tipografija u ispazjar responsivi. Issettja d-daqs minimu/massimu u l-firxa tal-viewport, ara preview ħaj, u ikkopja l-CSS f'linja waħda.

Ipprova
📓

Karta Stampabbli — b'Linji, Grafika, Grilja tal-Punti u Karta tal-Mużika (PDF)

Stampa l-karta tiegħek stess: b'linji (wide jew “college ruled”), grafika, grilja tal-punti, iżometrika, prattika tal-kitba bl-id, stejv tal-mużika jew noti Cornell, f'A4, Letter, A5 jew Legal, kwalunkwe kulur tal-linja, kemm jinħtieġu paġni. PDF vettorjali ċar magħmul fil-brawżer tiegħek.

Ipprova

Mistoqsijiet Frekwenti