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 எலும்புக்கூடும்.

அனைத்தும் உங்கள் பிரவுசரில் இயங்குகிறது — எதுவும் அப்லோட் செய்யப்படவில்லை.

தொடர்புடைய கருவிகள்

↔️

CSS ஃபிளக்ஸ்பாக்ஸ் ஜெனரேட்டர்

நேரடி உருப்படிகளில் flex direction, wrap, justify மற்றும் align-ஐ முயற்சி செய்யுங்கள் — CSS-ஐ காப்பி செய்யுங்கள்.

முயற்சிக்கவும்
📐

CSS clamp() உருவாக்கி

பதிலளிக்கும் தட்டச்சு மற்றும் இடைவெளிக்கான ஃப்ளூயிட் CSS clamp() மதிப்பை உருவாக்கவும். குறைந்தபட்ச/அதிகபட்ச அளவு மற்றும் வியூபோர்ட் வரம்பை அமைத்து, நேரடி முன்னோட்டத்தைப் பார்த்து, ஒற்றை-வரி CSS-ஐ நகலெடுக்கவும்.

முயற்சிக்கவும்
🧾

விலைப்பட்டியல் உருவாக்கி

ஒரு தொழில்முறை விலைப்பட்டியலை உருவாக்கி சுத்தமான PDF ஐ பதிவிறக்கவும் — வரி உருப்படிகள், வரி, தள்ளுபடி, பல நாணயம். பதிவு இல்லை, பதிவேற்றம் இல்லை, வரைவு உள்ளூரில் சேமிக்கப்படுகிறது.

முயற்சிக்கவும்

அடிக்கடி கேட்கப்படும் கேள்விகள்