Siirry pääsisältöön
LibraTool logoLibraTool

CSS-verkon generaattori ilmaiseksi

Suunnittele CSS-verkkoa visuaalisesti — raidat, yksiköt ja aukot — ja kopioi luotu CSS ja HTML.

Toimii offline-tilassa kerran ladattuna
Valmiit asetukset
Sarakkeet (3)
Rivit (2)
Reaaliaikainen esikatselu
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>

🔒 Kaikki toimii selaimessasi — mitään ei lähetetä.

Miten se toimii

Suunnittele CSS-ruudukko visuaalisesti: lisää jopa 8 saraketta ja 8 riviä, aseta jokainen kaista fr-, px-, auto- tai min/max-content-arvoksi, ja säädä rivi-/sarakevälejä. Numeroitu suora esikatselu päivittyy välittömästi, ja luotu grid-template-CSS sekä vastaava HTML ovat yhden napsautuksen päässä leikepöydältäsi.

  1. 1
    Muotoile ruudukko
    Lisää/poista sarakkeita ja rivejä +:lla ja −:lla.
  2. 2
    Aseta kaistat
    Jokainen sarake ja rivi saa oman yksikkönsä (1fr, 100px, auto…).
  3. 3
    Säädä välejä
    Erilliset rivi- ja sarakevälin liukusäätimet.
  4. 4
    Kopioi koodi
    Tuotantovalmis CSS ja vastaava HTML-runko.

Kaikki toimii selaimessasi — mitään ei ladata palvelimelle.

Liittyvät työkalut

↔️

CSS Flexbox -generaattori

Kokeile flex-suuntaa, käärintää, tasaus ja linjaus reaaliaikaisilla kohteilla — ja kopioi CSS.

Kokeile sitä
📐

CSS clamp() -generaattori

Luo sujuva CSS clamp() -arvo responsiiviselle typografialle ja välistykselle. Aseta minimi/maksimikoko ja näyttöporttiala, katso live-esikatselu ja kopioi yksirivinen CSS.

Kokeile sitä
📓

Tulostettava paperi — viivoitettu, ruutu-, pistepaperi ja nuottipaperi (PDF)

Tulosta oma paperisi: viivoitettu (leveä tai college), ruudutettu, pisteruudukko, isometrinen, kirjoitusharjoitus, nuottiviivasto tai Cornell-muistiinpanot, koossa A4, Letter, A5 tai Legal, millä viivan värillä tahansa ja niin monta sivua kuin tarvitset. Terävä vektori-PDF, joka tehdään selaimessasi.

Kokeile sitä

Usein kysytyt kysymykset