LibraTool logoLibraTool

Bepul CSS Grid generatori

CSS gridni vizual tarzda loyihalang — tracklar, birliklar va oraliqlar — va yaratilgan CSS hamda HTML ni nusxalang.

Yuklangandan keyin oflayn ishlaydi
Tayyor sozlamalar
Ustunlar (3)
Qatorlar (2)
Jonli ko'rinish
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>

🔒 Hammasi brauzeringizda ishlaydi — hech narsa yuklanmaydi.

Qanday ishlaydi

CSS panjarasini vizual tarzda loyihalang: 8 tagacha ustun va qator qo'shing, har bir yo'lakni fr, px, auto yoki min/max-content ga o'rnating va qator/ustun bo'shliqlarini sozlang. Raqamlangan jonli ko'rib chiqish darhol yangilanadi, yaratilgan grid-template CSS'i va mos HTML esa buferingizdan bir bosish uzoqlikda.

  1. 1
    Panjarani shakllantiring
    + va − bilan ustun va qatorlarni qo'shing/olib tashlang.
  2. 2
    Yo'laklarni o'rnating
    Har bir ustun va qator o'z birligini oladi (1fr, 100px, auto…).
  3. 3
    Bo'shliqlarni sozlang
    Alohida qator-bo'shligi va ustun-bo'shligi sursharshtlari.
  4. 4
    Kodni nusxalang
    Ishlab chiqarishga tayyor CSS va mos HTML skeleti.

Hammasi brauzeringizda ishlaydi — hech narsa yuklanmaydi.

Tegishli asboblar

↔️

CSS Flexbox generatori

Jonli elementlarda flex yo'nalishi, o'ralishi, tekislanishi bilan tajriba o'tkazing — va CSS ni nusxalang.

Sinab ko'ring
📐

CSS clamp() Generatori

Moslashuvchan tipografiya va bo'shliq uchun suyuq CSS clamp() qiymatini yarating. Minimal/maksimal o'lcham va ko'rish maydoni diapazonini belgilang, jonli oldindan ko'ring va bir qatorli CSS ni nusxalang.

Sinab ko'ring
🧾

Hisob-faktura Yaratuvchi

Professional hisob-faktura yarating va toza PDF yuklab oling — qator elementlari, soliq, chegirma, ko'p valyuta. Ro'yxatdan o'tish yo'q, yuklash yo'q, qoralama mahalliy saqlanadi.

Sinab ko'ring

Ko'p so'raladigan savollar