Liigu põhisisu juurde
LibraTool logoLibraTool

CSS Ruudustiku generaator tasuta

Kujundage visuaalselt CSS ruudustikku — rajad, ühikud ja vahed — ja kopeerige loodud CSS ja HTML.

Töötab võrguühenduseta pärast laadimist
Eelseadistused
Veerud (3)
Read (2)
Otseülekande eelvaade
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>

🔒 Kõik töötab teie brauseris — midagi ei laadita üles.

Kuidas see töötab

Disaini CSS-võrgustik visuaalselt: lisa kuni 8 veergu ja 8 rida, sea iga raja fr, px, auto või min/max-content peale ning kohanda rea/veeru vahesid. Numereeritud reaalajas eelvaade uueneb koheselt ja genereeritud grid-template CSS pluss vastav HTML on ühe klõpsu kaugusel su lõikelauast.

  1. 1
    Kujunda võrgustik
    Lisa/eemalda veerge ja ridu + ja − abil.
  2. 2
    Sea rajad
    Iga veerg ja rida saab oma ühiku (1fr, 100px, auto…).
  3. 3
    Häälesta vahesid
    Eraldi row-gap ja column-gap liugurid.
  4. 4
    Kopeeri kood
    Tootmisvalmis CSS ja vastav HTML-skelett.

Kõik toimib sinu brauseris — midagi ei laadita üles.

Seotud tööriistad

↔️

CSS Flexboxi generaator

Eksperimendeerige painde suunda, mähkimist, õigustamist ja joondamist otseülekande üksustes — ja kopeerige CSS.

Proovi järele
📐

CSS clamp() generaator

Loo vedeliku CSS clamp() väärtus reageeriva tipograafia ja tühiku jaoks. Määra min/max suurus ja vaateava vahemik, vaata reaalajas eelvaadet ja kopeeri ühe rea CSS.

Proovi järele
📓

Prinditav paber — joonitud, ruuduline, punktiline ja noodipaber (PDF)

Printige oma paber: joonitud (lai või college), ruuduline, punktvõrk, isomeetriline, kirjutamisharjutus, noodijoonestik või Cornelli märkmed, formaadis A4, Letter, A5 või Legal, mis tahes joonevärviga ja nii paljude lehtedega, kui vajate. Terav vektor-PDF, mis tehakse teie brauseris.

Proovi järele

Korduma kippuvad küsimused