LibraTool logoLibraTool

സൗജന്യ CSS ഗ്രിഡ് ജനറേറ്റർ

CSS ഗ്രിഡ് ദൃശ്യപരമായി ഡിസൈൻ ചെയ്യുക — ട്രാക്കുകൾ, യൂണിറ്റുകൾ, ഗ്യാപ്പുകൾ — തുടർന്ന് ജനറേറ്റ് ചെയ്ത CSS-ഉം HTML-ഉം കോപ്പി ചെയ്യുക.

ലോഡ് ചെയ്തുകഴിഞ്ഞാൽ ഓഫ്‌ലൈനിൽ പ്രവർത്തിക്കുന്നു
പ്രീസെറ്റുകൾ
കോളങ്ങൾ (3)
വരികൾ (2)
ലൈവ് പ്രിവ്യൂ
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>

🔒 എല്ലാം നിങ്ങളുടെ ബ്രൗസറിൽ പ്രവർത്തിക്കുന്നു — ഒന്നും അപ്‌ലോഡ് ചെയ്യുന്നില്ല.

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു

ഒരു CSS ഗ്രിഡ് ദൃശ്യപരമായി ഡിസൈൻ ചെയ്യുക: 8 കോളങ്ങളും 8 വരികളും വരെ ചേർക്കുക, ഓരോ ട്രാക്കും fr, px, auto അല്ലെങ്കിൽ min/max-content ആയി സെറ്റ് ചെയ്യുക, വരി/കോളം ഗ്യാപ്പുകൾ ക്രമീകരിക്കുക. അക്കമിട്ട തത്സമയ പ്രിവ്യൂ ഉടനടി അപ്ഡേറ്റ് ആകുന്നു, ജനറേറ്റ് ചെയ്ത grid-template CSS-ഉം അനുബന്ധ HTML-ഉം നിങ്ങളുടെ ക്ലിപ്ബോർഡിൽ നിന്ന് ഒരു ക്ലിക്ക് ദൂരത്തിലാണ്.

  1. 1
    ഗ്രിഡ് രൂപപ്പെടുത്തുക
    + ,− ഉപയോഗിച്ച് കോളങ്ങളും വരികളും ചേർക്കുക/നീക്കുക.
  2. 2
    ട്രാക്കുകൾ സെറ്റ് ചെയ്യുക
    ഓരോ കോളത്തിനും വരിക്കും അതിന്റേതായ യൂണിറ്റ് ലഭിക്കുന്നു (1fr, 100px, auto…).
  3. 3
    ഗ്യാപ്പുകൾ ട്യൂൺ ചെയ്യുക
    പ്രത്യേക row-gap, column-gap സ്ലൈഡറുകൾ.
  4. 4
    കോഡ് കോപ്പി ചെയ്യുക
    പ്രൊഡക്ഷൻ-റെഡി CSS-ഉം അനുബന്ധ HTML skeleton-ഉം.

എല്ലാം നിങ്ങളുടെ ബ്രൗസറിൽ പ്രവർത്തിക്കുന്നു — ഒന്നും അപ്‌ലോഡ് ചെയ്യപ്പെടില്ല.

അനുബന്ധ ടൂളുകൾ

↔️

CSS ഫ്ലെക്സ്ബോക്സ് ജനറേറ്റർ

ലൈവ് ഐറ്റങ്ങളിൽ flex direction, wrap, justify, align എന്നിവ പരീക്ഷിക്കുക — CSS കോപ്പി ചെയ്യുക.

പരീക്ഷിച്ചു നോക്കൂ
📐

CSS clamp() ജനറേറ്റർ

റെസ്‌പോൺസീവ് ടൈപ്പോഗ്രഫിക്കും സ്‌പേസിംഗിനുമായി ഫ്ലൂയിഡ് CSS clamp() മൂല്യം ജനറേറ്റ് ചെയ്യുക. മിനിമം/മാക്സിമം വലുപ്പവും വ്യൂപോർട്ട് ശ്രേണിയും സെറ്റ് ചെയ്യുക, ലൈവ് പ്രിവ്യൂ കാണുക, ഒറ്റ-ലൈൻ CSS കോപ്പി ചെയ്യുക.

പരീക്ഷിച്ചു നോക്കൂ
🧾

ഇൻവോയ്സ് ജനറേറ്റർ

ഒരു പ്രൊഫഷണൽ ഇൻവോയ്സ് സൃഷ്ടിച്ച് വൃത്തിയുള്ള PDF ഡൗൺലോഡ് ചെയ്യുക — ലൈൻ ഐറ്റങ്ങൾ, നികുതി, കിഴിവ്, മൾട്ടി-കറൻസി. സൈൻ-അപ്പ് ഇല്ല, അപ്‌ലോഡ് ഇല്ല, ഡ്രാഫ്റ്റ് ലോക്കലായി സേവ് ചെയ്യുന്നു.

പരീക്ഷിച്ചു നോക്കൂ

പതിവായി ചോദിക്കുന്ന ചോദ്യങ്ങൾ