ग्रिड-टेम्पलेट-कॉलम / ग्रिड-टेम्पलेट-पंक्तियाँ - सीएसएस-ट्रिक्स

grid-template-rowsऔर grid-template-columnsगुण, एक ग्रिड लेआउट की स्थापना के लिए प्राथमिक सीएसएस गुण हैं एक बार तत्व एक ग्रिड संदर्भ (है display: grid;)।

वहाँ भी हैं -ms-grid-columnsऔर -ms-grid-rows, जो इस के पुराने IE संस्करण हैं। आप उन्हें प्राप्त करने के लिए ऑटोप्रिसेसिंग पर विचार कर सकते हैं या नहीं, आपकी कॉल। एक अजीब अवधि भी थी जहां वे थे grid-definition-columnsऔर grid-definition-rows, लेकिन यह अब कोई बात नहीं है।

यहाँ Microsoft के प्रलेखन से प्राप्त एक उदाहरण दिया गया है:

.grid ( display: grid; grid-template-columns: auto 100px 1fr 2fr; grid-template-rows: 50px 5em min-content auto; )

यह ग्रिड में पंक्तियों / स्तंभों की संख्या और उनके आयाम को परिभाषित करता है।

ये दो गुण रिक्त स्थान द्वारा अलग किए गए मानों की एक सूची का समर्थन करते हैं। प्रत्येक मान एक आयाम निर्धारित करके एक नया स्तंभ / पंक्ति परिभाषित करेगा। 4 मानों की सूची के परिणामस्वरूप 4 कॉलम / पंक्तियाँ होंगी। एक एकल मान एक एकल स्तंभ / पंक्ति का उत्पादन करेगा।

स्वीकार किए जाते हैं मानों लंबाई (जैसे शामिल pxया em), प्रतिशत, भिन्न ( fr,, नीचे देखें) auto(या fit-content), min-content, max-content, और minmax(), या repeat()कार्य करते हैं।

उपरोक्त कोड उदाहरण में, इसका अर्थ है:

• कॉलम 1 ( ऑटो कीवर्ड): कॉलम में सामग्री के लिए कॉलम फिट किया गया है।
• कॉलम 2 ("100px"): कॉलम 100 पिक्सेल चौड़ा है।
• कॉलम 3 ("1 एफआर"): कॉलम शेष स्थान की एक अंश इकाई लेता है।
• कॉलम 4 ("2fr"): कॉलम शेष स्थान की दो अंश इकाइयों को लेता है।

• पंक्ति 1 ("50px"): पंक्ति 50 पिक्सेल लंबी है।
• पंक्ति 2 ("5em"): पंक्ति 5 किलोमीटर लंबी है।
• पंक्ति 3 ( न्यूनतम सामग्री वाला कीवर्ड): पंक्ति जितनी छोटी होगी, सामग्री उतनी ही छोटी होगी।
• पंक्ति 4 ( ऑटो कीवर्ड): पंक्ति में सामग्री के लिए पंक्ति को फिट किया गया है।

दोहराना ()

repeat()समारोह विशेष रूप से इस मॉड्यूल के लिए डिजाइन किया गया है। यह आपको एक्स बार दोहराए गए पैटर्न को परिभाषित करने की अनुमति देता है। की तरह repeat(6, 1fr);। मान लें कि आप 12 समान चौड़ाई वाले स्तंभों को एक दूसरे से 1% के अंतर से करना चाहते हैं; आप परिभाषित कर सकते हैं 1fr repeat(11, 1% 1fr)। यह वैसा ही है 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr।

Fr इकाई

frइकाई के लिए इस्तेमाल किया जा सकता grid-rowsऔर grid-columnsमूल्यों। यह "उपलब्ध स्थान के अंश" के लिए खड़ा है। जब आप निश्चित आकार और सामग्री-आधारित कॉलम / पंक्तियों को हटा चुके हों, तो इसे उपलब्ध स्थान के प्रतिशत के रूप में सोचें। जैसा कि युक्ति कहती है:

भिन्नात्मक स्थान का वितरण सभी 'लंबाई' या सामग्री-आधारित पंक्ति और स्तंभ आकार के बाद अधिकतम तक पहुँच जाता है।

सम्बंधित

सीएसएस ग्रिड के लिए हमारा सबसे अच्छा संसाधन सीएसएस ग्रिड के लिए हमारा पूरा गाइड है।

ब्राउज़र का समर्थन

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम	फ़ायर्फ़ॉक्स	अर्थात	एज	सफारी
५ 57	५२	1 1*	१६	10.1

मोबाइल / टेबलेट

Android क्रोम	Android फ़ायरफ़ॉक्स	एंड्रॉयड	iOS सफारी
88	.५	81	10.3