💺 🎼 🔴 CSS3 ग्रिड लेआउट का परिचय। हम ग्रिड के साथ काम करते हैं 🚀 🙏🏾 🧗🏿

अपडेट: इस लेख की कुछ जानकारी पुरानी है। मैं css-live.ru पर ताजा सामग्रियों की सलाह देता हूं ।

परिचय

CSS3 ग्रिड लेआउट मॉड्यूल सबसे दिलचस्प में से एक है, मेरी राय में, CSS3 परिवार में मॉड्यूल। मॉड्यूल का आधिकारिक इतिहास एक मसौदा विनिर्देश योग के रूप में आज एक वर्ष से थोड़ा कम है। व्लादिमीर युनेव ने दिसंबर 2010 में टीपीएसी 2010 में सीएसएस ग्रिड एलाइनमेंट नाम के साथ प्रारंभिक घोषणा के बारे में लिखा था । यह भी ध्यान दिया जाना चाहिए कि थोड़ा अलग नाम और कुछ अलग वाक्यविन्यास के साथ, लेकिन एक ही सार के साथ, इसे 2007 में WD वापस के रूप में घोषित किया गया था। आज, मॉड्यूल विकास कार्य पूरे जोरों पर है, प्रारंभिक कार्यान्वयन इंटरनेट एक्सप्लोरर 10 में पहले से ही है और आशा है कि अन्य लोकप्रिय ब्राउज़रों के भविष्य के संस्करणों में नई सुविधाओं के लिए समर्थन भी दिखाई देगा।

मुझे ग्रिड लेआउट की आवश्यकता क्यों है?

CSS3 ग्रिड लेआउट मॉडल को हल करने वाला कार्य किसी भी वेब टाइप्टर (और न केवल उसे) के लिए बहुत सरल और समझ में आता है: एक आभासी ग्रिड पर सामग्री की व्यवस्था के लिए एक सुविधाजनक तंत्र प्रदान करने के लिए।

तालिका के उपयोग के आधार पर पुराने टेबल-आधारित दृष्टिकोणों के विपरीत, दस्तावेज़ के शब्दार्थ यहां नहीं हैं और प्रस्तुति स्पष्ट रूप से सामग्री से अलग है। पागल और मल्टी-स्टोरी फ्लोट के साथ ब्लॉक लेआउट के विभिन्न रूपों के विपरीत, किसी भी तरह से जटिल संरचना के साथ बनना, मैन्युअल रूप से गणना किए गए इंडेंट के साथ संयुक्त, यहां शैलियों का विवरण तुच्छ सरल और पारदर्शी हो जाता है। निर्देशांक के संदर्भ में पूर्ण स्थिति के विपरीत, लचीलापन यहां रहता है। उपयुक्त कक्षाओं को निर्दिष्ट करके ग्रिड को चिह्नित करने के लिए लोकप्रिय सीएसएस / जेएस पुस्तकालयों के विपरीत (कम से कम एक ही बूटस्ट्रैप या यूआई सीएसएस ग्रिड लें ), वर्ग बंधन यहां क्लैट नहीं किया गया है।

सरासर खुशी! यह केवल व्यापक समर्थन की प्रतीक्षा करने के लिए बना हुआ है :) हालांकि, यदि आप HTML / js पर विंडोज 8 के लिए मेट्रो-शैली के एप्लिकेशन बनाने की योजना बनाते हैं, तो CSS3 ग्रिड लेआउट मॉड्यूल में वर्णित प्रमुख विशेषताएं पहले से ही काम कर रही हैं - और आप सुविधाजनक और व्यावहारिक तंत्र का उपयोग करके आगे बढ़ सकते हैं।

मूल बातें

ग्रिड लेआउट कैसे काम करता है, इसे जल्दी से समझने के लिए, आइए अभी एक उदाहरण से शुरू करते हैं। कल्पना करें कि आपको निम्नलिखित सामग्रियों के साथ तीन-स्तंभ लेआउट के लेआउट की शास्त्रीय समस्या को हल करने की आवश्यकता है:

<section> <header>Title</header> <nav>Menu</nav> <article>Content</article> <aside>Notes</aside> <footer>Footer</footer> </section>

जिसे तीन कॉलम में विभाजित किया जाना चाहिए:

स्मैकल श्रृंखला लेआउट

यह एक क्लासिक समस्या है, इसलिए मैं इस पर ध्यान नहीं दूंगा कि मल्टी-कॉलम ब्लॉक लेआउट के लिए पहले से ही पारंपरिक तरीकों का उपयोग करने के मामले में इसे कैसे हल किया जाता है। आइए देखें कि ग्रिड लेआउट का उपयोग करके क्या किया जा सकता है (मैं उदाहरणों में ब्राउज़र के उपसर्गों को छोड़ देता हूं, हालांकि, व्यवहार में उन्हें जोड़ने की आवश्यकता है - IE के लिए -ms- )।

यहाँ एक नमूना CSS कोड दिया गया है:

 section { display: grid; grid-columns: 150px 1fr 200px; grid-rows: 50px 1fr 50px; } section header { grid-column: 2; grid-row: 1; } section nav { grid-column: 1; grid-row: 2; } section article { grid-column: 2; grid-row: 2; } section aside { grid-column: 3; grid-row: 2; } section footer { grid-column: 2; grid-row: 3; }

सबसे सरल मामले में, जो कुछ भी करने की ज़रूरत है वह कंटेनर (अनुभाग) में इंगित करना है कि इसके अंदर की सामग्री को ग्रिड पर व्यवस्थित किया जाना चाहिए और ग्रिड-कॉलम और ग्रिड-पंक्तियों के गुणों का उपयोग करके एक आभासी ग्रिड सेट करना चाहिए (मैं सभी के बारे में बात करता हूं) वे क्या मान लेते हैं)। इसके अंदर प्रत्येक तत्व के लिए यह कहने के लिए पर्याप्त है कि यह कहाँ स्थित होना चाहिए।

स्टड लेआउट नमूने का उपयोग करना

और वह सब है! कुल:

वर्चुअल ग्रिड : कंटेनर में ग्रिड-कॉलम s और ग्रिड-पंक्ति s
तत्व प्लेसमेंट : ग्रिड-कॉलम और ग्रिड-पंक्ति।

अब विवरण और अतिरिक्त सुविधाओं को समझते हैं।

आभासी ग्रिड

ट्रैक्स: पंक्तियाँ और कॉलम

वर्चुअल ग्रिड बनाने के लिए, किन तत्वों को आगे रखा जाएगा, ग्रिड ट्रैक्स (ग्रिड ट्रैक्स) का वर्णन करना आवश्यक है - ग्रिड के अंदर पंक्तियाँ और कॉलम:

 #grid { display: grid; grid-columns: 150px 1fr; /*   */ grid-rows: 50px 1fr 50px; /*   */ }

ग्रिड लाइनों

ट्रैक ग्रिड लाइनों (ग्रिड लाइन्स) के बीच स्थित हैं, जो बदले में, प्रत्येक ट्रैक के दाएं-बाएं और ऊपर-नीचे स्थित हैं:
स्टड लाइनें

यह निर्धारित करने के लिए कि तत्व को ग्रिड पर कैसे रखा जाएगा, आपको यह निर्दिष्ट करना होगा कि कौन सी रेखा लंबवत और क्षैतिज रूप से जुड़ी होगी:

 #item { grid-column: 2; grid-row: 2; }

डिफ़ॉल्ट रूप से, एक तत्व निर्दिष्ट रेखा से अगली जगह तक जगह लेता है (इसलिए, इस तरह के नंबरिंग सेल नंबरिंग के साथ मेल खाता है और सब कुछ ऐसा दिखता है जैसे हम बात कर रहे हैं कि सेल किस तत्व को रखने के लिए है)।

कई कोशिकाओं में खिंचाव

कई ग्रिड कोशिकाओं पर एक तत्व फैलाने के लिए, आप ग्रिड-पंक्ति-स्पैन और ग्रिड-कॉलम-स्पैन गुणों का उपयोग कर सकते हैं:

 #item { grid-column: 2; grid-column-span: 3; grid-row: 2; grid-row-span:2; }

डिफ़ॉल्ट रूप से, दोनों गुण 1 पर सेट होते हैं, जो उपलब्ध स्थान को निर्दिष्ट पंक्ति से अगली (+1) तक फैलाने से मेल खाती है।

पटरियों को दोहराते हुए

अक्सर ऐसा होता है कि उपयोग के लिए इच्छित ग्रिड में कुछ विशेषता पैटर्न होते हैं:

 #grid { display: grid; grid-columns: 24px 120px 24px 120px 24px 120px 24px 120px 24px; grid-rows: 1fr 24px 1fr 24px 1fr 24px; }

ऐसे ग्रिडों को अधिक कॉम्पैक्ट और पारदर्शी रूप में वर्णन करना सुविधाजनक होगा - और ऐसा अवसर है! ऊपर दिए गए उदाहरण को निम्नानुसार वर्णित किया जा सकता है:

 #grid { display: grid; grid-columns: 24px (120px 24px)[4]; grid-rows: (1fr 24px)[3]; }

टेम्पलेट को कोष्ठक में वर्णित किया गया है, जिसके बाद वर्ग कोष्ठक में दोहराव की संख्या को इंगित किया गया है।

===

अब जब हम ग्रिड लाइनों का वर्णन करने के लिए बुनियादी संभावनाओं को जानते हैं, तो हम पटरियों पर वापस जाते हैं और उपयोग की गई इकाइयों से निपटने की कोशिश करते हैं।

माप की इकाइयों

जैसा कि आप ऊपर देख सकते हैं, कुछ स्थानों पर मैंने कुछ कॉलम और पंक्तियों के आकार को निर्दिष्ट करते समय एक असामान्य मूल्य का उपयोग किया था - १ एफआर। हम लंबाई निर्दिष्ट करते समय इस और अन्य संभावित मूल्यों के बारे में बात करेंगे।

कॉलम की चौड़ाई और लाइन ऊंचाई (ट्रैक आकार) का वर्णन करते समय, निम्नलिखित इकाइयों और मूल्यों का उपयोग किया जा सकता है:

रैखिक आयाम - CSS3 मान और इकाइयों मॉड्यूल में परिभाषित मानक लंबाई संकेत इकाइयां, उदाहरण के लिए, pt, px, em, vw, आदि।
प्रतिशत - ग्रिड के साथ कंटेनर के आकार के प्रतिशत के रूप में ट्रैक का आकार (हालांकि यदि ग्रिड की ऊंचाई या लंबाई सामग्री पर निर्भर करती है, तो परिणाम अपरिभाषित होगा);
भिन्न - एक गैर-ऋणात्मक संख्या, जो माप fr की इकाई द्वारा पीछा किया जाता है, प्रत्येक अंश का आकार निर्दिष्ट संख्या के अनुपात में लिया जाता है (नीचे विवरण देखें);
अधिकतम सामग्री - ट्रैक में तत्वों की अधिकतम लंबाई की अधिकतम लंबाई को इंगित करने के लिए एक कीवर्ड;
न्यूनतम सामग्री - ट्रैक में तत्वों की न्यूनतम लंबाई की अधिकतम लंबाई को इंगित करने वाला एक कीवर्ड;
minmax (न्यूनतम, अधिकतम) - मानों की श्रेणी निर्धारित करता है (ऑपरेशन के सिद्धांत को minmax (p, q) = max (p, min (fill-available, q) के रूप में वर्णित किया जा सकता है )
- निचली सीमा की अधिकतम और उपलब्ध स्थान की न्यूनतम और ऊपरी सीमा);
ऑटो मिनिमैक्स (न्यूनतम सामग्री, अधिकतम सामग्री) के बराबर एक कीवर्ड है।

आइए यह जानने की कोशिश करें कि भिन्न मान कैसे काम करते हैं। ग्रिड चौड़ाई और ऊंचाई में कुछ जगह लेता है। यह सामग्री पर निर्भर हो सकता है, सख्ती से तय किया जा सकता है, या बाहरी कंटेनर में सभी उपलब्ध स्थान पर कब्जा कर सकता है। आगे, जब स्तंभों और रेखाओं के एक हिस्से की पटरियों का वर्णन करते हैं, तो आप स्पष्ट रूप से निर्धारित कर सकते हैं कि उन्हें किस आकार का होना चाहिए, दूसरे भाग के लिए आप संकेत कर सकते हैं कि उनकी लंबाई सामग्री पर निर्भर करती है।

अब, यदि आप लंबवत या क्षैतिज रूप से ग्रिड के लिए आवंटित उपलब्ध लंबाई से ऐसी सभी स्पष्ट या "सामग्री" लंबाई की राशि घटाते हैं, तो शेष स्थान को उनके द्वारा दिखाए गए अनुपात के अनुपात के बीच वितरित किया जाता है (ऐसे सभी शेयरों के योग से विभाजित अंश का आकार):

अंशों का नमूना

ऊपर दिए गए उदाहरण में, ये अनुपात 3: 1: 1: 1 की चौड़ाई वाले तीन स्तंभ हैं और 5: 2 के अनुपात में ऊँचाई वाली दो पंक्तियाँ हैं।

उदाहरण

मसौदा विनिर्देश एक ऐसा व्यापक उदाहरण प्रदान करता है जिससे आप एक बार में इस पूरी योजना को विभिन्न प्रकार के मूल्यों के साथ देख सकते हैं:

 #grid { display: grid; grid-columns: 100px 1fr max-content minmax(min-content, 1fr) }

यहाँ निम्नलिखित पंक्तियाँ परिभाषित हैं (ट्रैक, वे इस मामले में कॉलम हैं):

पहली लाइन शुरू।
लाइन पहले से 100px है।
सभी गणना के बाद शेष स्थान के 1/2 स्थान पर एक और रेखा दूसरी पंक्ति से है।
और एक और रेखा, जिसकी दूरी तीसरे से कॉलम में तत्वों की सामग्री के आकार की अधिकतम है।
अंत में, अंतिम पंक्ति, स्तंभ में तत्वों की न्यूनतम लंबाई या शेष स्थान के 1/2 के बराबर दूरी पर चौथे से स्थित है, जो भी अधिक हो।

अभी भी उन शेयरों के लिए लेखांकन के बारे में एक छोटी सी बारीकियों है जो माइनमैक्स फ़ंक्शन के अंदर थे: उन्हें अधिकतम मात्रा में इंगित किए जाने पर ही शेयरों की कुल राशि में ध्यान में रखा जाता है। न्यूनतम स्थिति में इंगित शेयरों को 0px के बराबर माना जाता है। गणना पर अधिक जानकारी के लिए, विनिर्देश देखें।

===
अगला चरण यह पता लगाने की कोशिश करना है कि तत्वों को ग्रिड लाइनों (कोशिकाओं के अंदर) के बीच कैसे रखा जाता है।

बाइंडिंग तत्व

अब जब तत्व ग्रिड लाइनों से "बंधे" हैं, तो एक स्वाभाविक सवाल उठता है: वे लाइनों के बीच कैसे स्थित हैं?

लाइनों के लिए संज्ञा

सेल बॉर्डर पर तत्वों का बंधन ग्रिड-कॉलम-संरेखित और ग्रिड-पंक्ति-पंक्ति गुणों का उपयोग करके नियंत्रित किया जाता है। नियंत्रण के लिए निम्नलिखित मूल्यों का उपयोग किया जा सकता है:

प्रारंभ
अंत
केंद्र
खिंचाव

मुझे लगता है कि कार्रवाई नाम से स्पष्ट है, मैं केवल यह ध्यान देता हूं कि प्रत्येक मामले में हम एक तत्व को उसके मार्जिन बॉक्स से अलग करने की बात कर रहे हैं। डिफ़ॉल्ट मान खिंचाव है।

लाइनों के नमूने के लिए संज्ञा और

स्तंभों में एंकर (क्षैतिज रूप से) पाठ की दिशा से मेल खाती है (उदाहरण के लिए, अरबी में, शुरुआत दाईं ओर होगी और अंत बाईं तरफ होगा)। पंक्तियों में तड़कना (लंबवत) ब्लॉक के प्रवाह की दिशा के साथ मेल खाता है (यह, वैसे, इसका मतलब है कि कुछ पूर्व एशियाई भाषाओं में, पंक्तियों और स्तंभ स्थानों को स्वैप कर सकते हैं)।

परत प्रबंधन

अगला महत्वपूर्ण बिंदु: ओवरले के साथ ग्रिड के अंदर तत्वों की व्यवस्था। क्या होता है, उदाहरण के लिए, दो तत्व एक ही रेखा से जुड़े होते हैं, या कई कोशिकाओं के विस्तार के दौरान ओवरलैप होते हैं?

सबसे पहले, निम्नलिखित बारीकियों को समझना महत्वपूर्ण है: ग्रिड के अंदर रखे गए तत्व सीधे एक दूसरे के स्थान को प्रभावित नहीं करते हैं। यदि आप दस तत्वों को टाई करते हैं, तो दूसरी पंक्ति को क्षैतिज रूप से और तीसरी पंक्ति को लंबवत रूप से कहें, फिर डिफ़ॉल्ट रूप से वे सभी को एक दूसरे के ऊपर रखा जाएगा, जैसे कि उनमें से प्रत्येक को संबंधित कोने से बांधा गया है। तत्व केवल पटरियों के आकार को प्रभावित कर सकते हैं, यदि वे बंधे हैं, बदले में, सामग्री के आकार तक।

ओवरलैपिंग स्टूडियो आइटम

ऐसी परतों के प्रदर्शन क्रम को नियंत्रित करने के लिए, विनिर्देश का वर्तमान संस्करण जेड-इंडेक्स की क्षमताओं का विस्तार करता है, जिससे आप ग्रिड के अंदर तत्वों की परतों को नियंत्रित कर सकते हैं।

ध्यान दें : विनिर्देश के पिछले संस्करण में, IE10 के वर्तमान संस्करण (प्लेटफ़ॉर्म प्रिव्यू 5) के आधार पर, इन उद्देश्यों के लिए एक अलग ग्रिड-लेयर प्रॉपर्टी को परिभाषित किया गया था, ताकि जेड-इंडेक्स के साथ संघर्ष न हो, हालांकि, बाद में कार्य समूह में चर्चा के बाद यह समाधान था। पर फिर से विचार।

उपयोग उदाहरण:

 #grid { display: grid; grid-columns: (1fr)[3]; grid-rows: (1fr)[4]; } #A { grid-column:1; grid-row:3; grid-column-span:2; } #B { grid-column:1; grid-row:1; grid-row-span:2; /* grid-layer: 10; */ z-index:10; margin-top:10px; } #C { grid-column:1; grid-row:1; grid-column-span:2; margin-left:50px; } #D { grid-column:2; grid-row:3; grid-row-span:2; grid-column-span:2; margin:10px 0 0 10px; } #E { grid-column:2; grid-row:2; /* grid-layer: 5; */ z-index:5; margin: -20px; }

css3 ग्रिड लाइब्रेरी

ब्राउज़रों में ग्रिड के साथ काम करना शुरू करने के लिए (अभी तक नहीं) सीएसएस ग्रिड लेआउट मॉड्यूल का समर्थन करते हुए, आप eCSStender js लाइब्रेरी और CSS3 ग्रिड संरेखण एक्सटेंशन का उपयोग कर सकते हैं, जो निम्नलिखित गुणों का समर्थन करते हैं:

प्रदर्शन: ग्रिड
ग्रिड-कॉलम और ग्रिड-पंक्तियाँ
ग्रिड-कॉलम और ग्रिड पंक्ति
ग्रिड-कॉलम-स्पैन और ग्रिड-पंक्ति-स्पैन

काम का एक उदाहरण यहाँ पाया जा सकता है ।

भविष्य के बारे में थोड़ा, या मॉड्यूल में क्या अन्य विशेषताएं वर्णित हैं

अंत में, आइए भविष्य के लिए थोड़ा सा दरवाजा खोलें और सीएसएस 3 ग्रिड लेआउट मॉड्यूल में क्या अन्य संभावनाएं तैयार की जा रही हैं , इस पर एक नज़र डालें।

कृपया ध्यान दें कि आज के लिए नीचे सूचीबद्ध सुविधाओं को केवल ड्राफ्ट विनिर्देश में वर्णित किया गया है, लेकिन अभी तक रिलीज़ किए गए ब्राउज़रों (पूर्व-रिलीज़ सहित) के बीच समर्थन नहीं है। सीएसएस कार्य समूह की सामुदायिक प्रतिक्रिया और सिफारिशों के आधार पर वे भविष्य में भी बदल सकते हैं।

किसी आइटम को स्नैप करने के लिए अंतिम पंक्ति निर्दिष्ट करें

वैकल्पिक रूप से, एक तत्व को ग्रिड में स्नैप करने के लिए, आप न केवल शुरुआत, बल्कि अंतिम पंक्ति को भी निर्दिष्ट कर सकते हैं।

 #item { grid-column: 2; grid-row: 2 4; }

स्पैन मेकेनिज्म के विपरीत, जो कहता है कि किसी सेल को एक तत्व को क्षैतिज या लंबवत रूप से कितनी देर तक खींचना चाहिए, यह सुविधा आपको स्पष्ट रूप से इंगित करने की अनुमति देती है कि किस लाइन पर तत्व समाप्त होना चाहिए। व्यक्तिगत ग्रिड लाइनों को नाम देने की क्षमता के साथ संयोजन में उपयोग करना भी सुविधाजनक है।

जिसका नाम ग्रिड लाइन्स रखा गया है

सुविधा के लिए, लाइनों को नाम दिया जा सकता है। यह पटरियों के विवरण में संबंधित स्थानों में स्ट्रिंग मान सम्मिलित करके किया जाता है (आप कई नाम दे सकते हैं यदि यह व्यावहारिक अर्थ में है, उदाहरण के लिए, मार्कअप शब्दार्थ के संदर्भ में):

 #grid { display: grid; grid-columns: "nav" "first" 150px "content" 1fr "last"; grid-rows: "header" 50px "content" 1fr "footer" 50px; }

आगे, जब बाध्यकारी तत्व का वर्णन करते हैं, तो आप इन नामों का उल्लेख कर सकते हैं:

 #menu { grid-column: "nav"; grid-row: "content"; } #header { grid-column: "content"; grid-row: "header"; } #article { grid-column: "content"; grid-row: "content"; }

विनिर्देश भी 4 पूर्व-नामित लाइनों का परिचय देता है - ऊर्ध्वाधर और क्षैतिज शुरुआत और अंत में , वास्तव में, पूरे ग्रिड को तैयार करना। यह अनुमति देता है, उदाहरण के लिए, कुल कॉलम के बारे में सोचने के बिना, "दूसरे कॉलम से अंतिम तक" तत्व को व्यवस्थित करने के लिए।

 #menu { grid-column: 1; grid-row: start end; } #footer { grid-column: 2 end; grid-row: 3; }

नामित कक्ष और टेम्पलेट

ग्रिड पर तत्वों को रखने का एक और तरीका है, उन टेम्प्लेट का उपयोग करना जो ब्लॉकों की आभासी संरचना का वर्णन करते हैं:

 #grid { display: grid; grid-template: "ln" "ma" "ba" "ff"; grid-columns: auto minmax(min-content, 1fr); grid-rows: auto minmax(min-content, 1fr) auto auto; }

इसी समय, एक तत्व को एक बकसुआ के साथ एक या किसी अन्य आभासी सेल में रखने के लिए, यह संबंधित नियम के साथ इसे संदर्भित करने के लिए पर्याप्त है:

 #article { grid-cell: "a"; }

यह दृष्टिकोण विशेष रूप से सुविधाजनक हो जाता है यदि, विभिन्न स्थितियों पर निर्भर करता है, उदाहरण के लिए, स्क्रीन रिज़ॉल्यूशन, आपको तत्वों की व्यवस्था को बदलने और यहां तक कि ग्रिड को फिर से करने की आवश्यकता है। इसी तरह की स्थिति में, ग्रिड लेआउट मीडिया क्वेरी के साथ अच्छी तरह से चला जाता है:

 @media (orientation: portrait) { #grid { display: grid; grid-template: "ln" "ma" "ba" "ff"; grid-columns: auto minmax(min-content, 1fr); grid-rows: auto minmax(min-content, 1fr) auto auto; } } @media (orientation: landscape) { #grid { display: grid; grid-template: "ln" "ma" "mb" "sf"; grid-columns: auto minmax(min-content, 1fr); grid-rows: auto minmax(min-content, 1fr) auto auto; } } #article { grid-cell: "a"; }

कृपया ध्यान दें कि नामित सेल में लेख का बंधन स्वयं नहीं बदलता है। (पेन का उपयोग शुरू होने से पहले से ही खुजली हो रही है, हालांकि, हम ब्राउज़रों में इसके लागू होने की प्रतीक्षा कर रहे हैं।)

निष्कर्ष

मैंने एक लेख को CSS3 ग्रिड लेआउट मॉड्यूल की प्रमुख विशेषताओं का अवलोकन करने का प्रयास किया। मुझे उम्मीद है कि वे आपको मुझसे कम नहीं प्रेरित करेंगे। :)

आपको याद दिला दूं कि मॉड्यूल का विकास जारी है, संपादकों बाहरी समुदाय से और सीएसएस कार्य समूह के भीतर प्रतिक्रिया एकत्र करते हैं। मुख्य कार्यक्षमता का वर्तमान कार्यान्वयन इंटरनेट एक्सप्लोरर 10 में देखा जा सकता है। कुछ दिलचस्प उदाहरण ietestdrive.com पर मिल सकते हैं: ग्रिड सिस्टम और हैंड्स ऑन: CSS3 ग्रिड लेआउट :

हाथों पर: CSS3 स्टड लेआउट

मैं एक बार फिर ध्यान देता हूं कि IE10 इंजन द्वारा पहले से समर्थित ग्रिड लेआउट सुविधाओं का उपयोग विंडोज 8 के लिए HTML / JS पर मेट्रो शैली के अनुप्रयोगों को विकसित करते समय भी किया जा सकता है।

CSS3 ग्रिड लेआउट का परिचय। हम ग्रिड के साथ काम करते हैं