सीएसएस ग्रिड लेआउट मॉड्यूल का परिचय
यह एक बार था टेबल, फिर हाशिये और तैरता है, फिर flexbox और अब ग्रिड: सीएसएस ने हमेशा उम्र के पुराने काम को आसान बनाने के लिए नए और बेहतर तरीकों की ओर कदम बढ़ाया कोडिंग वेब लेआउट. CSS ग्रिड लेआउट मॉडल लेआउट बना और अपडेट कर सकते हैं दो कुल्हाड़ियों के साथ: क्षैतिज और लंबवत, चौड़ाई और ऊंचाई दोनों को प्रभावित करना तत्वों का.
ग्रिड लेआउट मार्कअप में तत्वों की स्थिति पर निर्भर नहीं करता है, इसलिए, आप कर सकते हैं तत्वों के प्लेसमेंट में फेरबदल करें लेआउट में फेरबदल के बिना। ग्रिड मॉडल में, एक ग्रिड कंटेनर तत्व है ग्रिड कॉलम और पंक्तियों में विभाजित (सामूहिक रूप से जाना जाता है ग्रिड ट्रैक) द्वारा ग्रिड लाइनें. अब देखते हैं कैसे एक नमूना ग्रिड बनाएँ.
ब्राउज़र का समर्थन
इस लेख को लिखने के रूप में, सीएसएस ग्रिड मॉड्यूल केवल नवीनतम IE ब्राउज़र और एज द्वारा समर्थित है। CSS ग्रिड है प्रायोगिक चरण में अन्य प्रमुख ब्राउज़रों में जिसमें आपको करना है मैन्युअल रूप से समर्थन सक्षम करें:
- फ़ायरफ़ॉक्स: Shift + F2 दबाएं, निम्नलिखित कमांड दर्ज करें ब्राउज़र के निचले भाग में दिखाई देने वाले GCLI इनपुट बार में:
प्रीफ़ सेट लेआउट .css.grid.enabled सच. - क्रोम: ब्राउज़ करें
chrome: // झंडेURL और सक्षम करेंप्रायोगिक वेब प्लेटफ़ॉर्म सुविधाएँ.
सभी प्रमुख ब्राउज़र समर्थन की संभावना है 2017 के प्रारंभ / मध्य तक आते हैं.
एक नमूना ग्रिड
सेवा मेरे एक तत्व को ग्रिड कंटेनर में बदल दें आप उपयोग कर सकते हैं इन तीनों में से एक प्रदर्शन गुण:
प्रदर्शन: ग्रिड;- तत्व है एक ब्लॉक ग्रिड कंटेनर में परिवर्तितप्रदर्शन: इनलाइन-ग्रिड;- तत्व है इनलाइन ग्रिड कंटेनर में परिवर्तितप्रदर्शन: सबग्रिड;- यदि तत्व एक ग्रिड आइटम है तो यह है एक सबग्रिड में परिवर्तित जो ग्रिड टेम्पलेट और ग्रिड गैप गुणों की उपेक्षा करता है
जिस तरह एक टेबल में कई टेबल सेल होते हैं, उसी तरह एक ग्रिड होता है कई ग्रिड कोशिकाओं से युक्त. एक ग्रिड आइटम है ग्रिड कोशिकाओं के एक सेट को सौंपा जिसे सामूहिक रूप से जाना जाता है ग्रिड क्षेत्र.
हम बनाने जा रहे हैं पांच वर्गों (ग्रिड क्षेत्रों) के साथ एक ग्रिड: ऊपर, नीचे, बाएँ, दाएँ और केंद्र। HTML के होते हैं एक कंटेनर div के अंदर पाँच divs.
चोटीबाएंकेंद्रसहीतल
CSS में, ग्रिड टेम्पलेट क्षेत्रों संपत्ति विभिन्न ग्रिड क्षेत्रों के साथ एक ग्रिड को परिभाषित करता है. इसके मूल्य में, एक स्ट्रिंग एक ग्रिड पंक्ति का प्रतिनिधित्व करता है तथा एक स्ट्रिंग के भीतर हर वैध नाम एक कॉलम का प्रतिनिधित्व करता है. सेवा मेरे एक खाली ग्रिड सेल बनाएं आप का उपयोग करने की जरूरत है डॉट (.) चरित्र एक पंक्ति स्ट्रिंग के भीतर.
ग्रिड क्षेत्र के नाम द्वारा संदर्भित किया जाना है ग्रिड क्षेत्र व्यक्तिगत ग्रिड आइटम की संपत्ति.
.ग्रिड-कंटेनर चौड़ाई: 500 पीएक्स; ऊंचाई: 500 पीएक्स; प्रदर्शन: ग्रिड; ग्रिड-टेम्प्लेट-क्षेत्र: "टॉप टॉप टॉप" "लेफ्ट सेंटर राइट" "बॉटम बॉटम बॉटम"; .ग्रिड-टॉप ग्रिड-एरिया: टॉप; । ग्रिड-तल ग्रिड-क्षेत्र: नीचे; .ग्रिड-लेफ्ट ग्रिड-एरिया: लेफ्ट; .ग्रिड-राइट ग्रिड-एरिया: राइट; .ग्रिड-सेंटर ग्रिड-एरिया: सेंटर;
तो यह कोड बनाता है तीन पंक्तियों और स्तंभों वाला एक ग्रिड. चोटी आइटम एक क्षेत्र में फैला हुआ है पहली पंक्ति में तीन कॉलम और यह तल आइटम खत्म हो गया अंतिम पंक्ति में तीन कॉलम. हर एक बाएं, केंद्र तथा सही आइटम लेता है मध्य पंक्ति में एक स्तंभ.
अब हमें जरूरत है आयाम प्रदान करें इन पंक्तियों और स्तंभों के लिए। ग्रिड टेम्पलेट कॉलम तथा ग्रिड टेम्पलेट पंक्तियों गुण ग्रिड ट्रैक के आकार को परिभाषित करें (पंक्ति या स्तंभ).
.ग्रिड-कंटेनर चौड़ाई: 500 पीएक्स; ऊंचाई: 500 पीएक्स; प्रदर्शन: ग्रिड; ग्रिड-टेम्प्लेट-क्षेत्र: "टॉप टॉप टॉप" "लेफ्ट सेंटर राइट" "बॉटम बॉटम बॉटम"; ग्रिड-टेम्पलेट-कॉलम: 100px ऑटो 100px; ग्रिड-टेम्पलेट-पंक्तियाँ: 50px ऑटो 150px;
इस तरह से हमारी सीएसएस ग्रिड अब (कुछ अतिरिक्त शैलियों के साथ) दिखती है:
ग्रिड आइटम के बीच की जगह
आप जोड़ सकते हो कॉलम और पंक्तियों के बीच रिक्त स्थान का उपयोग करते हुए ग्रिड स्तंभ-गैप तथा ग्रिड पंक्ति-गैप, या उनकी लंबी संपत्ति ग्रिड की खाई.
.ग्रिड-कंटेनर चौड़ाई: 500 पीएक्स; ऊंचाई: 500 पीएक्स; प्रदर्शन: ग्रिड; ग्रिड-टेम्प्लेट-क्षेत्र: "टॉप टॉप टॉप" "लेफ्ट सेंटर राइट" "बॉटम बॉटम बॉटम"; ग्रिड-टेम्पलेट-कॉलम: 100px ऑटो 100px; ग्रिड-टेम्पलेट-पंक्तियाँ: 50px ऑटो 150px; ग्रिड-गैप: 5 पीएक्स 5 पीएक्स;
नीचे आप देख सकते हैं कि ग्रिड की खाई संपत्ति वास्तव में ग्रिड आइटम के बीच अंतराल जोड़ा.
ग्रिड सामग्री और आइटम संरेखित करें
दोनों ओर संरेखित-सामग्री ग्रिड कंटेनर की संपत्ति (.ग्रिड से कंटेनर) ग्रिड की सामग्री को संरेखित करता है इनलाइन अक्ष (क्षैतिज अक्ष) के साथ और संपत्ति संरेखित-सामग्री, एक ग्रिड की सामग्री को संरेखित करता है ब्लॉक अक्ष के साथ (ऊर्ध्वाधर अक्ष). दोनों गुण इनमें से एक मान हो सकता है: शुरु, समाप्त, केंद्र, अंतरिक्ष के बीच, अंतरिक्ष के चारों ओर तथा अंतरिक्ष में समान रूप से.
जहां लागू हो, ट्रैक (पंक्ति या स्तंभ) आकार सामग्री फिट करने के लिए सिकुड़ती है जब गठबंधन किया। ग्रिड सामग्री के स्क्रीनशॉट पर एक नज़र डालें विभिन्न मूल्यों के साथ गठबंधन किया नीचे.
औचित्य-सामग्री: प्रारंभ;
औचित्य-सामग्री: अंत;
औचित्य-सामग्री: केंद्र;
औचित्य-सामग्री: अंतरिक्ष-बीच;
औचित्य-सामग्री: अंतरिक्ष-आसपास;
औचित्य-सामग्री: अंतरिक्ष-समान रूप से;
संरेखित सामग्री: शुरू;
संरेखित सामग्री: अंत;
संरेखित सामग्री: केंद्र;
संरेखित सामग्री: अंतरिक्ष के बीच;
संरेखित सामग्री: अंतरिक्ष-आसपास;
संरेखित सामग्री: अंतरिक्ष समान रूप से;
दोनों दोनों ओर संरेखित-सामग्री तथा संरेखित-सामग्री गुण एक ग्रिड के भीतर पूरी सामग्री को संरेखित करें.
सेवा मेरे अपने ग्रिड क्षेत्रों के भीतर अलग-अलग आइटम संरेखित करें, उपयोग संरेखण गुणों की अन्य जोड़ी: दोनों ओर संरेखित-आइटम तथा संरेखित आइटम. दोनों में इनमें से एक मान हो सकता है: शुरु, समाप्त, केंद्र, आधारभूत (क्षेत्र के आधार ग्रिड लाइन के साथ संरेखित आइटम) और खिंचाव (आइटम अपना पूरा क्षेत्र भरते हैं).
