डिज़ाइन / लेआउट

CSS ग्रिड जनरेटर (विज़ुअल Grid-Template-Areas बिल्डर)

कॉलम, पंक्तियों और गैप की सेटिंग करें, हेडर, साइडबार और मुख्य भाग जैसे नाम वाले एरिया बनाने के लिए सेल पर ड्रैग करें, और grid-template-columns, grid-template-rows व grid-template-areas वाला CSS कॉपी करें—पेस्ट करने के लिए तैयार।

CSS ग्रिड जनरेटर (विज़ुअल Grid-Template-Areas बिल्डर): ट्रैक के आकार लिखते ही दर्ज हो जाते हैं, जैसे 200px 1fr 1fr, और दोहराए गए आकार repeat() में बदल जाते हैं। हर एरिया grid-template-areas में एक नाम बन जाता है; खाली सेल के लिए डॉट होता है और grid-area के ज़रिए किसी element को रखने का नियम भी बनता है। CSS के अनुसार एरिया आयताकार होने चाहिए और एक-दूसरे पर ओवरलैप नहीं कर सकते। लेआउट इसी ब्राउज़र में याद रखा जाता है। यह आपके ब्राउज़र में 100% स्थानीय रूप से चलता है और सर्वर पर कोई फ़ाइल अपलोड नहीं होती।

श्रेणी
डेवलपर टूल्स
रन
आपके ब्राउज़र में
लागत
मुफ़्त · साइन अप की ज़रूरत नहीं
उपलब्धता
इस्तेमाल के लिए तैयार
CSS grid जनरेटरलोकल प्रोसेसिंग

पूरी तरह आपके ब्राउज़र में चलता है

क्षेत्र बनाने के लिए सेल पर ड्रैग करें; यह कई पंक्तियों और कॉलम में फैल सकता है। 1fr, 200px, auto या minmax(100px, 1fr) जैसे ट्रैक आकार लिखें।

CSS

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  grid-template-areas:
    "header  header  header"
    "sidebar main    main"
    "footer  footer  footer";
}

.header { grid-area: header; }

.sidebar { grid-area: sidebar; }

.main { grid-area: main; }

.footer { grid-area: footer; }

हर चाइल्ड एलिमेंट को उसके क्षेत्र की क्लास दें। बिंदु के रूप में दिखाए गए सेल खाली रहेंगे।

नाम वाले क्षेत्र

grid-template-areas में हर string एक row और हर word एक cell होता है: "header header" "sidebar main" header को दोनों columns में फैलाता है। grid-area: main वाला child, main नाम वाले हर cell को भरता है। नामों का class names से मिलना ज़रूरी नहीं है, लेकिन उन्हें एक जैसा रखने से CSS पढ़ना आसान होता है।

आम track sizes

minmax(200px, 1fr) किसी column को कम-से-कम 200 px चौड़ा रखता है, लेकिन उसे बढ़ने देता है; auto content के अनुसार आकार लेता है; repeat(auto-fill, minmax(12rem, 1fr)) उपलब्ध जगह में जितने columns आ सकें, उतने बनाता है—card grids के लिए यह एक उपयोगी pattern है। CSS clamp() से spacing को fluid बनाया जा सकता है।

इस्तेमाल करने का तरीका

  1. कॉलम और पंक्तियों की संख्या चुनें और उनके आकार लिखें।
  2. एरिया बनाने के लिए सेल पर ड्रैग करें और उनके नाम बदलें।
  3. CSS कॉपी करें और हर child element को उसके एरिया की class दें।

गोपनीयता और सीमाएँ

लेआउट आपके ब्राउज़र में बनाया जाता है।

संबंधित टूल्स

CSS clamp()बॉक्स शैडोCSS फ़ॉर्मैटरFlexboxक्लिप-पाथ

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

fr का क्या मतलब है?

यह खाली जगह का एक अंश है: 1fr 2fr का मतलब है कि स्थिर आकार और गैप हटाने के बाद दूसरा कॉलम पहले कॉलम से दोगुना चौड़ा होगा।

एरिया एक-दूसरे पर ओवरलैप या L-आकार के क्यों नहीं हो सकते?

grid-template-areas केवल आयताकार एरिया स्वीकार करता है और हर एरिया का नाम एक ही बार होना चाहिए। CSS ग्रिड में ओवरलैप करने वाले आइटम संभव हैं, लेकिन उनके लिए नाम वाले एरिया के बजाय स्पष्ट लाइन नंबर देने पड़ते हैं।

मैं इसे responsive कैसे बनाऊँ?

चौड़े लेआउट के लिए बनाया गया CSS इस्तेमाल करें और छोटी स्क्रीन के लिए media query के अंदर grid-template-columns और grid-template-areas को फिर से परिभाषित करें।

मुफ़्त टूल · आपके ब्राउज़र में बार चलता है · अकाउंट की ज़रूरत नहीं