CSS ग्रिड जेनरेटर

Q: आइटम को पूरी चौड़ाई में कैसे फैलाऊं?

grid-column को `1 / -1` सेट करें; -1 आख़िरी ग्रिड लाइन को दर्शाता है।

CSS Grid लेआउट विज़ुअली बनाएं: grid-template-columns/rows, वैलिडेशन के साथ नामित एरिया, गैप, अलाइनमेंट और हर आइटम का प्लेसमेंट। साफ़ CSS कॉपी करें।

प्रीसेट

कंटेनर

grid-template-columns

grid-template-rows

grid-template-areas

हर पंक्ति के लिए एक लाइन, नाम स्पेस से अलग, खाली सेल के लिए बिंदु (.)। हर नाम एक आयत बनाना चाहिए।

column-gappx

row-gappx

justify-items

align-items

आइटम की संख्या

आइटम 1

यहाँ आइटम चुनें या प्रीव्यू में उस पर क्लिक करें।

grid-column

grid-row

grid-area

उदाहरण: 1 / 3, span 2, 2 / -1। एरिया नाम लाइन प्लेसमेंट को ओवरराइड करता है।

प्रीव्यू

कंटेनर का आकार बदलने के लिए प्रीव्यू का निचला कोना खींचें।

CSS कोड

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

CSS ग्रिड जेनरेटर क्या है?

यह CSS Grid लेआउट बिल्डर है जिसमें आप कोई भी ट्रैक टेम्प्लेट (जैसे repeat(auto-fill, minmax(120px, 1fr))) लिख सकते हैं, नामित एरिया बना सकते हैं, गैप और अलाइनमेंट सेट कर सकते हैं और अलग-अलग आइटम को लाइन नंबर, स्पैन या एरिया नाम से रख सकते हैं। लाइव प्रीव्यू जेनरेट हुए CSS का ही उपयोग करता है।

CSS ग्रिड जेनरेटर का उपयोग कैसे करें

किसी प्रीसेट (3 columns, Responsive cards, Holy grail layout, Sidebar, Bento) से शुरू करें या grid-template-columns और grid-template-rows खुद लिखें।
चाहें तो grid-template-areas लिखें: हर पंक्ति के लिए एक लाइन, नाम स्पेस से अलग, और खाली सेल के लिए एक बिंदु।
row-gap, column-gap, justify-items, align-items और Number of items सेट करें।
कोई आइटम चुनें और grid-column, grid-row (जैसे 1 / 3, span 2) सेट करें या कोई grid-area चुनें।
CSS कोड कॉपी करें।

उदाहरण

इनपुट

grid-template-columns 200px 1fr, row-gap 8px, column-gap 16px; item 2: grid-column 1 / 3, grid-row span 2

आउटपुट

.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 8px 16px;
}

.item-2 {
  grid-column: 1 / 3;
  grid-row: span 2;
}

CSS ग्रिड जेनरेटर का उपयोग कब करें

ग्रिड द्वि-आयामी लेआउट के लिए इस्तेमाल करें: पेज स्केलेटन, डैशबोर्ड, गैलरी और कार्ड ग्रिड। आइटम की सिंगल रो या कॉलम, जो कंटेंट के अनुसार आकार लें, के लिए अक्सर फ़्लेक्सबॉक्स सरल होता है (CSS Flexbox Generator देखें)।

CSS ग्रिड जेनरेटर कैसे काम करता है

टेम्प्लेट और प्लेसमेंट वैल्यू की जाँच ब्राउज़र के अपने CSS.supports() से होती है, इसलिए CSS में मान्य हर चीज़ स्वीकार होती है और अमान्य वैल्यू चिह्नित होती हैं। एरिया टेक्स्ट वैलिडेट होता है: हर पंक्ति में सेल की संख्या बराबर होनी चाहिए और हर नाम एक ही आयत बनाए। आउटपुट में display: grid, टेम्प्लेट, हर पंक्ति के लिए एक कोटेड स्ट्रिंग वाला grid-template-areas, gap (row और column गैप बराबर हों तो एक वैल्यू, वरना row column) और केवल stretch न होने पर अलाइनमेंट होता है। आइटम को grid-area या grid-column/grid-row नियम तभी मिलते हैं जब वे सेट हों।

सामान्य उपयोग मामले

हेडर, साइडबार, मेन और फ़ुटर वाले पेज स्केलेटन
auto-fill और minmax() के साथ रिस्पॉन्सिव कार्ड गैलरी
स्पैन होने वाली टाइल के साथ Bento-शैली डैशबोर्ड
नामित एरिया से मैगज़ीन लेआउट
लेबल और इनपुट कॉलम वाले फ़ॉर्म लेआउट

अक्सर पूछे जाने वाले प्रश्न

यह क्यों कह रहा है कि मेरा एरिया आयत नहीं है?

grid-template-areas में हर नाम को सेल के आयताकार ब्लॉक में होना चाहिए। L-आकार या अलग-अलग जगह बँटे नाम अमान्य CSS हैं और पूरी प्रॉपर्टी अनदेखी कर दी जाएगी।

auto-fill और auto-fit में क्या अंतर है?

दोनों जितने कॉलम समा सकें उतने बनाते हैं। auto-fill खाली ट्रैक रखता है, जबकि auto-fit उन्हें सिकोड़ देता है ताकि मौजूदा आइटम पंक्ति भरने के लिए फैल जाएं।