Fara beint í aðalefni
LibraTool logoLibraTool

CSS Grid framleiðandi — ókeypis

Hannstu CSS hnitakerfi með sjónrænum hætti — brautir, einingar og bila — og afritaðu mynduðu CSS og HTML.

Virkar án nettengingar eftir hleðslu
Forstillingar
Dálkar (3)
Raðir (2)
Lifandi forskoðun
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>

🔒 Allt keyrir í þínum vafra — ekkert er hlaðið upp.

Hvernig það virkar

Hannaðu CSS-rist sjónrænt: bættu við allt að 8 dálkum og 8 röðum, stilltu sérhverja braut á fr, px, auto, eða min/max-content, og sesetta röð-/dálk-bilin. Númeraða lifandi forskoðunin uppfærist samstundis og myndaða grid-template CSS-ið plus samsvarandi HTML eru einn smell frá klippiborðinu þínu.

  1. 1
    Mótaðu ristina
    Bættu við/fjarlægðu dálka og raðir með + og −.
  2. 2
    Stilltu brautirnar
    Sérhver dálkur og röð fær sína eigin einingu (1fr, 100px, auto…).
  3. 3
    Fínstilltu bilin
    Aðskildar rennur fyrir röð-bil og dálk-bil.
  4. 4
    Afritaðu kóðann
    Framleiðslu-tilbúið CSS og samsvarandi HTML-beinagrind.

Allt keyrir í vafranum þínum — ekkert er sent upp.

Tengd verkfæri

↔️

CSS Flexbox framleiðandi

Tilrauna með flex stefnu, vefingu, réttlætingu og samhæfingu á lifandi hlutum — og afritaðu CSS.

Prófaðu það
📐

CSS clamp()-smiður

Búðu til fljótandi CSS clamp() gildi fyrir svarhæfar leturnám og bil. Stilltu lágmarks/hámmarksstærð og skjásvið, sjáðu beina forskoðun og afritaðu einalína CSS.

Prófaðu það
📓

Prentanlegur pappír — línustrikaður, rúðustrikaður, punktaður og nótnapappír (PDF)

Prentaðu þinn eigin pappír: línustrikaðan (breiðan eða college), rúðustrikaðan, punktanet, jafnmálsteikningu, skriftaræfingar, nótnastrengi eða Cornell-glósur, í A4, Letter, A5 eða Legal, í hvaða línulit sem er og með eins mörgum síðum og þú þarft. Skörp vektor-PDF búin til í vafranum þínum.

Prófaðu það

Algengar spurningar