CSS Grid Generator

Build CSS Grid layouts visually.

grid-template-columns

grid-template-rows

column-gap

row-gap

justify-items

align-items

justify-content

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

पूर्वावलोकन

जेनरेट किया CSS

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  column-gap: 16px;
  row-gap: 16px;
  justify-items: stretch;
  align-items: stretch;
  justify-content: start;
}

इस टूल के बारे में

CSS Grid Layout Generator आपको grid-template-columns, grid-template-rows, gap गुण और अलाइनमेंट सेटिंग्स समायोजित करके 2D ग्रिड लेआउट को विज़ुअल रूप से डिज़ाइन करने देता है। लाइव प्रीव्यू दिखाता है कि कोड लिखने से पहले ग्रिड कैसा दिखेगा।

CSS Grid CSS में सबसे शक्तिशाली लेआउट सिस्टम है, जो 2D लेआउट (एक साथ पंक्तियाँ और कॉलम) के लिए डिज़ाइन किया गया है। यह Flexbox का पूरक है जो 1D लेआउट संभालता है।

कैसे उपयोग करें

कॉलम संरचना परिभाषित करने के लिए grid-template-columns सेट करें। सामान्य पैटर्न के लिए प्रीसेट बटन का उपयोग करें।
वैकल्पिक रूप से grid-template-rows सेट करें (अधिकांश लेआउट के लिए auto छोड़ें)।
स्पेसिंग के लिए column-gap और row-gap समायोजित करें।
सेल के भीतर आइटम प्लेसमेंट नियंत्रित करने के लिए justify-items और align-items का उपयोग करें।
ग्रिड की प्रतिक्रिया देखने के लिए स्लाइडर से आइटम गिनती बदलें।
जेनरेट किया CSS कॉपी करने के लिए कॉपी पर क्लिक करें।

उपयोग के मामले

फ्रंट-एंड डेवलपर पेज लेआउट, डैशबोर्ड संरचना और इमेज गैलरी के लिए CSS Grid का उपयोग करते हैं। डिज़ाइनर डेवलपर्स के साथ साझा करने के लिए सटीक CSS के रूप में ग्रिड स्पेसिफिकेशन निर्यात करते हैं। डिज़ाइन सिस्टम टीम स्पेसिंग और कॉलम पैटर्न प्रोटोटाइप करती हैं।

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

1fr का क्या मतलब है? — fr एक फ्रैक्शनल यूनिट है। 1fr का मतलब उपलब्ध स्पेस का एक हिस्सा है। repeat(3, 1fr) तीन समान कॉलम बनाता है।
Grid और Flexbox में से कब क्या उपयोग करें? — 2D लेआउट (पंक्तियाँ और कॉलम) के लिए Grid उपयोग करें। एक दिशा में आइटम रखने के लिए Flexbox उपयोग करें।
क्या CSS Grid सभी ब्राउज़र में समर्थित है? — हाँ। CSS Grid 2017 से सभी आधुनिक ब्राउज़र में पूरी तरह समर्थित है।