Pereiti prie pagrindinio turinio
LibraTool logoLibraTool

CSS tinklelio generatorius nemokamai

Vizualiai sukurkite CSS tinklelį – takelius, vienetus ir tarpus – ir nukopijuokite sugeneruotą CSS ir HTML.

Veikia neprisijungus, kai įkeliama
Numatytosios parinktys
Stulpeliai (3)
Eilutės (2)
Tiesioginė peržiūra
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>

🔒 Viskas veikia jūsų naršyklėje – nieko nėra išsiunčiama.

Kaip tai veikia

Sukurkite CSS tinklelį vizualiai: pridėkite iki 8 stulpelių ir 8 eilučių, nustatykite kiekvieną taką kaip fr, px, auto ar min/max-content, ir pakoreguokite eilučių/stulpelių tarpus. Sunumeruota gyva peržiūra akimirksniu atsinaujina, o sugeneruotas grid-template CSS plius atitinkantis HTML yra vieno paspaudimo atstumu nuo jūsų iškarpinės.

  1. 1
    Suformuokite tinklelį
    Pridėkite/pašalinkite stulpelius ir eilutes su + ir −.
  2. 2
    Nustatykite takus
    Kiekvienas stulpelis ir eilutė gauna savo vienetą (1fr, 100px, auto…).
  3. 3
    Pakoreguokite tarpus
    Atskiri eilučių-tarpo ir stulpelių-tarpo slankikliai.
  4. 4
    Nukopijuokite kodą
    Produkcijai paruoštą CSS ir atitinkantį HTML karkasą.

Viskas vyksta jūsų naršyklėje — niekas neįkeliama.

Susiję įrankiai

↔️

CSS Flexbox generatorius

Eksperimentuokite su flex kryptimi, vyniojimu, išdėstymu (justify) ir lygiavimu (align) gyvuose elementuose – ir nukopijuokite CSS.

Išbandykite
📐

CSS clamp() generatorius

Generuokite dinamišką CSS clamp() reikšmę adaptyviai tipografijai ir tarpams. Nustatykite minimalų/maksimalų dydį ir ekrano dydžio diapazoną, peržiūrėkite gyvai ir nukopijuokite vienos eilutės CSS.

Išbandykite
📓

Spausdinamas popierius — linijuotas, languotas, taškuotas ir natų popierius (PDF)

Išspausdinkite savo popierių: linijuotą (platų ar college), languotą, taškų tinklelį, izometrinį, rašymo pratimus, natų liniuotę ar Cornell užrašus A4, Letter, A5 ar Legal formatu, bet kokios linijų spalvos ir tiek puslapių, kiek reikia. Ryškus vektorinis PDF, sukurtas jūsų naršyklėje.

Išbandykite

Dažnai užduodami klausimai