मुख्य सामग्रीमा जानुहोस्
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 Flexbox जनरेटर

Flex दिशा, र्याप, जस्टिफाई र लाइभ वस्तुहरूमा पङ्क्तिबद्ध गर्नुहोस् — र CSS प्रतिलिपि गर्नुहोस्।

प्रयास गर्नुहोस्
📐

CSS clamp() जेनेरेटर

responsive typography र spacing का लागि fluid CSS clamp() मान उत्पन्न गर्नुहोस्। min/max साइज र viewport दायरा सेट गर्नुहोस्, लाइभ प्रिभ्यू हेर्नुहोस्, र एक-लाइन CSS कपी गर्नुहोस्।

प्रयास गर्नुहोस्
📓

प्रिन्ट गर्न मिल्ने कागज — धर्के, ग्राफ, डट ग्रिड र सङ्गीत कागज (PDF)

आफ्नै कागज प्रिन्ट गर्नुहोस्: धर्के (वाइड वा कलेज रुल्ड), ग्राफ, डट ग्रिड, आइसोमेट्रिक, हस्तलेखन अभ्यास, सङ्गीत स्टाफ वा Cornell नोट्स, A4, Letter, A5 वा Legal मा, जुनसुकै धर्काको रङ, चाहिएजति पृष्ठ। तपाईंको ब्राउजरमा बनेको स्पष्ट भेक्टर PDF।

प्रयास गर्नुहोस्

बारम्बार सोधिने प्रश्नहरू