CSS के साथ परफेक्ट रिस्पॉन्सिव ग्रिड बनाएं

रिस्पॉन्सिव ग्रिड बनाना वेब डेवलपमेंट का एक अनिवार्य हिस्सा है।

चाहे आप फोटोग्राफर के लिए पोर्टफोलियो पेज बना रहे हों, ई-कॉमर्स साइट, या लैंडिंग पेज, यह सब ग्रिड लेआउट पर आधारित होने वाला है। ग्रिड हर जगह हैं।

अगर आप जानते हैं कि एक अच्छा, रिस्पॉन्सिव ग्रिड लेआउट कैसे बनाया जाता है, तो आप तुरंत एक फ्रंट-एंड वेब डेवलपर के रूप में अलग दिखेंगे।

आइए सीधे इसमें कूदते हैं कि ग्रिड क्या है इसका त्वरित अवलोकन:

ग्रिड लेआउट क्या है?

ग्रिड मीडिया में दृश्य तत्वों को व्यवस्थित करने की एक आजमाई हुई और सच्ची विधि है।

डिज़ाइनर्स ने प्रिंट समाचार पत्रों और विज्ञापनों के पहले दिनों से ग्रिड लागू किए हैं।

ग्रिड का उपयोग एक सौंदर्यपूर्ण रूप से सुखद रचना बनाता है जिसे मस्तिष्क के लिए ग्रहण करना और समझना आसान होता है। इसलिए यह कुछ ऐसा है जिसे आप निश्चित रूप से अपनी वेबसाइटों में उपयोग करना चाहते हैं।

एक ग्रिड डिज़ाइन क्षेत्र को कॉलम में विभाजित करेगा। कॉलम के बीच एक स्पेस, या गटर होता है।

आमतौर पर आप कुल बारह कॉलम चाहते हैं क्योंकि आप तब स्पेस को दो या तीन के गुणकों में विभाजित कर सकते हैं।

आप इस अभ्यास को स्टूडियोप्रेस वेबसाइट थीम पर प्रभाव में देख सकते हैं:

कॉलम सभी समान चौड़ाई के नहीं होने चाहिए, निश्चित रूप से। आप कुछ कॉलम को दो कॉलम तक फैलाना चाह सकते हैं, और अन्य को चार, छह, या अधिक तक।

बस सुनिश्चित करें कि पेज पर सभी एलिमेंट्स कॉलम में से किसी एक पर शुरू और समाप्त होते हैं।

इसके अलावा, आप अपने वर्टिकल क्षेत्र को विभिन्न ज़ोन में विभाजित कर सकते हैं, प्रत्येक ज़ोन में कॉलम चौड़ाई का एक अलग संयोजन हो सकता है।

यह उतना जटिल नहीं है जितना यह शुरू में लग रहा था, है ना? तो अब जब हम मूल बातें जानते हैं, तो आपकी वेबसाइट में रिस्पॉन्सिव ग्रिड बनाने का सबसे अच्छा तरीका क्या है?

पढ़ते रहें और पता लगाएं:

रिस्पॉन्सिव ग्रिड बनाने के तरीके

हाल ही में फ्लेक्सबॉक्स और CSS ग्रिड लेआउट के बारे में बहुत बात हुई है।

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

(और फ्लोट ग्रिड से पहले, HTML टेबल्स एकमात्र विकल्प थे। लेकिन हम उनके बारे में बात नहीं करते 😉 )

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

रिस्पॉन्सिव फ्रेमवर्क वेबसाइट बनाना बहुत आसान बनाते हैं। वे एक बहुत बड़ा टाइम-सेवर हैं!

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

यह समझने की कोशिश करें कि फ्रेमवर्क के हुड के नीचे अंतर्निहित स्कैफोल्डिंग कैसे काम करती है। यह आपके डिव में कुछ कॉलम क्लास फेंकने जितना आसान नहीं है, लेकिन आप CSS सिद्धांतों को बेहतर समझेंगे।

निचला रेखा: यह आपको एक बेहतर वेब डेवलपर बनाएगा।

हमारा मिनी-प्रोजेक्ट

हम एक साधारण 2-कॉलम ग्रिड बनाने के तरीके में गोता लगाने जा रहे हैं, तीन अलग-अलग विधियों का उपयोग करके:

• फ्लोट,
• फ्लेक्सबॉक्स,
• और CSS ग्रिड लेआउट।

मैं कोड स्निपेट्स और कुछ ग्राफिक्स का उपयोग करके प्रत्येक चरण की व्याख्या करूंगा।

ग्रिड की योजना बनाना

हम जो ग्रिड बनाना चाहते हैं वह एक बुनियादी दो-कॉलम ग्रिड है। इसमें कई वेबसाइट डिज़ाइन की तरह एक मुख्य कंटेंट क्षेत्र और एक साइडबार है।

लेआउट बनाते समय, आपको सबसे पहले यह तय करना होगा कि यह रिस्पॉन्सिव रूप से कैसा दिखेगा। मतलब, डेस्कटॉप पर देखने पर लेआउट कैसे बदलेगा, बनाम टैबलेट या मोबाइल पर देखने पर।

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

मोबाइल पर, हम चाहते हैं कि कॉलम स्टैक हों, मुख्य कंटेंट ऊपर और साइडबार नीचे। दोनों 100% चौड़ाई पर होंगे।

टैबलेट पर, हम चाहते हैं कि कॉलम साइड-बाय-साइड हों, प्रत्येक 50% चौड़ाई ले रहा हो।

डेस्कटॉप पर, हम चाहते हैं कि मुख्य कंटेंट कॉलम 2/3 चौड़ाई ले और साइडबार 1/3 चौड़ाई ले।

और यह है कि हम उन ब्रेकपॉइंट्स पर ग्रिड को कैसा दिखाना चाहते हैं:

अब हमारे पास अपना ग्रिड बनाना शुरू करने के लिए आवश्यक बुनियादी जानकारी है!

फ्लोट ग्रिड

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

CSS में फ्लोट प्रॉपर्टी मूल रूप से टेक्स्ट को इमेज के चारों ओर प्रवाहित करने जैसे उपयोगों के लिए अभिप्रेत थी। इमेज को फ्लोट: लेफ्ट रूलसेट देने से इमेज पैरेंट एलिमेंट के बाईं ओर अलाइन, या "फ्लोट" हो जाएगी।

फ्लोट के साथ ग्रिड बनाना

ग्रिड बनाने के लिए, आप कई एलिमेंट्स को फ्लोट प्रॉपर्टी देंगे, जो उन सभी को एक तरफ, या तो दाएं या बाएं अलाइन कर देगा।

.column { display: block; float: left; }

काफी सीधा लगता है, है ना?

हालांकि, फ्लोट के बारे में एक कष्टप्रद पहलू यह है कि यह एलिमेंट को डॉक्यूमेंट के सामान्य फ्लो से बाहर ले जाता है।

नीचे दी गई छवि दिखाती है कि जब नीले फ्लोटेड कॉलम को सामान्य डिस्प्ले से बाहर ले जाया जाता है तो क्या होता है। ग्रे पैरेंट डिव तब उस ऊंचाई पर गिर जाएगी जो उसके कोई बच्चे न होने पर होती।

आप इस समस्या को कुछ तरीकों से ठीक कर सकते हैं।

आप पैरेंट एलिमेंट पर display: table रूलसेट जोड़ सकते हैं। या आप पैरेंट पर :after सूडो-एलिमेंट जोड़कर निम्न स्टाइल के साथ फ्लोट को क्लियर कर सकते हैं।

.parent:after { clear: both; content: ""; display: block; }

एक अन्य नोट यह है कि यदि आप पैडिंग और मार्जिन का उपयोग कर रहे हैं (जो मूल रूप से हमेशा होता है) तो आपको हर एलिमेंट पर box-sizing: border-box सेट करना होगा।

यह घोषणा एलिमेंट्स की अंतिम चौड़ाई और ऊंचाई की गणना करते समय पैडिंग और मार्जिन को शामिल करती है। यह सुनिश्चित करता है कि एलिमेंट्स पेज से बाहर न जाएं।

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 

क्रिस कोयियर के पास इस पर वास्तव में एक बढ़िया व्याख्या है।

ग्रिड को रिस्पॉन्सिव बनाने के लिए मीडिया क्वेरी का उपयोग करना

ग्रिड को रिस्पॉन्सिव बनाने के लिए, हम मीडिया क्वेरी का उपयोग करेंगे। उनका उपयोग करके, हम ग्रिड को बता सकेंगे कि कुछ डिवाइस चौड़ाई पर एक विशिष्ट लेआउट होना चाहिए।

हमारे नोट्स से, हम चाहते हैं कि मोबाइल के लिए मेन और साइडबार दोनों एलिमेंट्स 100% चौड़ाई के हों, फिर टैबलेट पर दोनों 50% साइड-बाय-साइड, और फिर डेस्कटॉप पर 2/3 और 1/3 चौड़ाई साइड-बाय-साइड।

HTML में हम पैरेंट डिव बनाएंगे, जिसमें दो चाइल्ड कॉलम डिव होंगे जिनमें क्लास होंगी जो दर्शाती हैं कि वे मेन या साइडबार सेक्शन हैं।

<div class="parent"> <div class="column main"></div> <div class="column sidebar"></div> </div>

मोबाइल पर:

CSS में, मोबाइल-फर्स्ट दृष्टिकोण का उपयोग करके, हम डिफ़ॉल्ट रूप से दोनों कॉलम को 100% पर सेट करेंगे।

.column { display: block; width: 100%; }

टैबलेट पर:

फिर टैबलेट और अधिक चौड़ाई के लिए, हम कॉलम को बाएं फ्लोट करेंगे और उन्हें 50% चौड़ाई देंगे।

@media only screen and (min-width: 641px){ .column { width: 50%; float: left; } }

डेस्कटॉप पर:

डेस्कटॉप के लिए हम एक और मीडिया क्वेरी जोड़ेंगे जो मेन और साइडबार कंटेंट की चौड़ाई को 2/3 और 1/3 पर बदल देती है।

@media only screen and (min-width: 1025px){ .main { width: 66.66%; } .sidebar { width: 33.33%; } }

आप कोड को मेरे कोडपेन पर यहाँ एक्शन में देख सकते हैं:

See the Pen Float Grid by Jessica (@thecodercoder) on CodePen.

यह अपेक्षाकृत सरल लगता है, है ना? फ्लोट भयानक नहीं हैं - वे काफी समय तक हमारे पास सब कुछ थे।

लेकिन जैसे-जैसे हम फ्लेक्सबॉक्स पर आगे बढ़ते हैं, मुझे लगता है कि आप देखेंगे कि फ्लोट ग्रिड थोड़े हैकी हैं, और फ्लेक्सबॉक्स अधिक सहज है।

फ्लेक्सबॉक्स ग्रिड

फ्लेक्सबॉक्स का उपयोग करके रिस्पॉन्सिव ग्रिड बनाने के लिए, हम ऊपर वाले समान HTML का उपयोग करेंगे, जिसमें एक पैरेंट डिव होगा जिसमें दो चाइल्ड कॉलम डिव होंगे।

पहली चीज जो आपको करनी होगी वह है घोषित करना कि पैरेंट को फ्लेक्सबॉक्स का उपयोग करना चाहिए:

.parent { display: flex; }

फिर कॉलम डिव पर फ्लेक्स प्रॉपर्टी सेट करें:

.column { flex: 1; }

flex: 1 घोषणा का अर्थ है कि प्रत्येक कॉलम डिव की अन्य कॉलम के समान चौड़ाई होगी। यह एक अनुपात की तरह है।

यदि आप पहले कॉलम को दूसरे कॉलम की दोगुनी चौड़ाई चाहते हैं, तो आप पहले कॉलम के फ्लेक्स को 2 पर सेट करेंगे। और दूसरे कॉलम का फ्लेक्स मान उसका आधा, 1 होगा।

शुरू करने के लिए आपको बस इतना ही चाहिए!

फ्लेक्सबॉक्स काफी बुद्धिमान है, और यह स्वचालित रूप से ग्रिड स्पेस को कॉलम के बीच समान रूप से विभाजित करेगा, चाहे आपके पास कितने भी हों।

ऊपर दिए गए CSS की तुलना फ्लोट ग्रिड के लिए हमारे पास जो था उससे करें, और मुझे लगता है कि आप मुझसे सहमत होंगे कि फ्लेक्सबॉक्स सरल है।

फ्लेक्स ग्रिड बनाना

अब, अपना दो-कॉलम रिस्पॉन्सिव ग्रिड बनाने के लिए, हम वही करेंगे जो हमने फ्लोट ग्रिड के लिए किया था और मोबाइल के लिए पहले अपने डिफ़ॉल्ट स्टाइल सेट करेंगे।

मोबाइल के लिए:

हमें मोबाइल पर फ्लेक्सबॉक्स की आवश्यकता नहीं है, केवल टैबलेट और डेस्कटॉप पर, इसलिए पैरेंट डिव को अभी display: flex घोषणा की आवश्यकता नहीं है।

हम चाहते हैं कि कॉलम डिव चौड़ाई का 100% हों। आप कॉलम पर स्पष्ट रूप से width: 100% घोषणा सेट कर सकते हैं, यदि आप चाहते हैं।

या आप बस कोई चौड़ाई स्टाइल घोषित नहीं कर सकते। डिव आमतौर पर display: block पर डिफ़ॉल्ट होगा और स्वचालित रूप से 100% चौड़ाई होगी।

टैबलेट के लिए:

टैबलेट से शुरू करके हम फ्लेक्सबॉक्स जोड़ेंगे, और टैबलेट चौड़ाई और ऊपर के लिए स्टाइल के लिए मीडिया क्वेरी का उपयोग करेंगे।

सबसे पहले, हम फ्लेक्सबॉक्स बनाएंगे और पैरेंट को display: flex उपयोग करने के लिए सेट करेंगे।

हम चाहते हैं कि इस चौड़ाई पर कॉलम समान रूप से दूरी पर हों, इसलिए हम सभी कॉलम डिव के लिए flex: 1 घोषणा का उपयोग करेंगे। 1 का अर्थ है कि कॉलम एक दूसरे के सापेक्ष समान चौड़ाई के होंगे।

@media only screen and (min-width: 641px){ .parent { display: flex; } .column { flex: 1; } }

डेस्कटॉप के लिए:

डेस्कटॉप पर, हम चाहते हैं कि मुख्य कंटेंट उपलब्ध चौड़ाई का 2/3 ले। साइडबार शेष 1/3 लेगा।

इसे पूरा करने के लिए, हम मेन कॉलम के फ्लेक्स मान को 2 तक बढ़ाएंगे। साइडबार फ्लेक्स टैबलेट पर सेट 1 पर रहेगा, इसलिए इसे डेस्कटॉप के लिए एक और घोषणा की आवश्यकता नहीं है।

@media only screen and (min-width: 1025px){ .main { flex: 2; } }

इसका मतलब है कि मुख्य कंटेंट साइडबार की दोगुनी चौड़ाई होगी।

चूंकि दो कॉलम हैं, मुख्य कंटेंट 2/3 चौड़ाई होगी, और साइडबार उसका आधा, 1/3 चौड़ाई होगी।

फ्लेक्सबॉक्स शक्तिशाली और सहज है

आप तुरंत देख सकते हैं कि फ्लेक्सबॉक्स को कितना कम CSS चाहिए। और यह जो ग्रिड बनाता है वह फ्लोट ग्रिड के समान ही है।

मुझे फ्लेक्सबॉक्स के बारे में जो पसंद है वह यह है कि यह बस काम करता है. यह सहज है।

सालों तक CSS फ्लोट से संघर्ष करने के बाद, मुझे विश्वास नहीं हो रहा था कि ग्रिड बनाना कितना पागलपन से आसान था।

फ्लेक्सबॉक्स में अधिक उन्नत प्रॉपर्टी भी हैं जिनका आप लाभ उठा सकते हैं:

• कॉलम आइटम को क्षैतिज और लंबवत दोनों तरह से अलाइन करें (हां, लंबवत!!)।
• आइटम को केंद्रित करें या उन्हें ग्रिड पैरेंट के बाएं और दाएं किनारों तक फैलाएं।
• विभिन्न ब्रेकपॉइंट्स पर आइटम का क्रम बदलें।

आप CSS ट्रिक्स और मोज़िला पर इन लेखों में फ्लेक्सबॉक्स क्या कर सकता है, इसके बारे में अधिक पढ़ सकते हैं।

और यहाँ फ्लेक्स ग्रिड के लिए कोडपेन है:

See the Pen Flex Grid by Jessica (@thecodercoder) on CodePen.

आपको फिर कभी फ्लोट का उपयोग नहीं करना पड़ेगा। जब तक आप टेक्स्ट को इमेज के चारों ओर लपेट नहीं रहे हैं, निश्चित रूप से।

कुछ और मज़ा के लिए तैयार? आइए अंतिम ग्रिड विधि पर चलते हैं:

CSS ग्रिड लेआउट

CSS ग्रिड ग्रिड बनाने की नवीनतम विधि है। यह फ्लेक्सबॉक्स के समान है, फिर भी उससे बहुत अलग है।

रेचल एंड्रयू के अनुसार, CSS ग्रिड पर जाने-माने विशेषज्ञ, उनमें से प्रत्येक की अपनी ताकत है:

• फ्लेक्सबॉक्स एक दिशा में व्यवस्थित तत्वों के लिए उपयोगी है, या तो एक पंक्ति में या एक कॉलम में।
• CSS ग्रिड पंक्तियों और कॉलम दोनों को शामिल करने वाली व्यवस्थाओं के लिए उपयोगी है।

वह इस लेख में अधिक बताती हैं कि CSS ग्रिड एक सामान्य वेबसाइट लेआउट के लिए फ्लेक्सबॉक्स की तुलना में बेहतर क्यों है जिसमें हेडर, फूटर, कंटेंट, और साइडबार शामिल हैं।

वर्तमान में, CSS ग्रिड की मुख्य कमी यह है कि यह सभी ब्राउज़रों द्वारा सार्वभौमिक रूप से समर्थित नहीं है।

क्रोम, iOS सफारी, और एंड्रॉइड के पुराने संस्करण बिल्कुल भी इसका समर्थन नहीं करते। और IE और एज का समर्थन स्पॉटी है।

यदि आप CSS ग्रिड का उपयोग करना चाहते हैं, तो आपके पास कुछ विकल्प हैं:

• आप इसका उपयोग कर सकते हैं और उन ब्राउज़रों के लिए कुछ CSS फॉलबैक शामिल कर सकते हैं जो इसका समर्थन नहीं करते।
• या आप फ्लेक्सबॉक्स का उपयोग कर सकते हैं और तब तक प्रतीक्षा कर सकते हैं जब तक ब्राउज़र समर्थन अधिक सर्वव्यापी न हो जाए।

CSS ग्रिड कैसे काम करता है

फ्लेक्सबॉक्स की तरह, CSS ग्रिड के लिए आवश्यक है कि आप पैरेंट एलिमेंट पर एक डिस्प्ले प्रॉपर्टी सेट करें। इस मामले में हम display: grid घोषित करेंगे।

हालांकि, CSS ग्रिड का एक बड़ा अंतर है। प्रत्येक चाइल्ड एलिमेंट पर ग्रिड सेटिंग्स सेट करने के बजाय, हम पैरेंट पर ग्रिड टेम्पलेट भी सेट करते हैं।

ग्रिड टेम्पलेट सेट करने के लिए, हम उन कॉलम और/या पंक्तियों की संख्या घोषित करेंगे जो आप चाहते हैं, और प्रत्येक का आकार।

इसे पूरा करने के लिए, यदि आपके पास कई कॉलम हैं तो grid-template-columns प्रॉपर्टी का उपयोग करें, और कई पंक्तियों के लिए grid-template-rows।

प्रॉपर्टी के बाद प्रत्येक चाइल्ड एलिमेंट के लिए एक लंबाई मान होता है।

दो कॉलम वाले ग्रिड के लिए, हम सिर्फ grid-template-columns प्रॉपर्टी का उपयोग करेंगे।

grid-template-columns प्रॉपर्टी में तब दो मान होंगे, प्रत्येक कॉलम के लिए एक:

.parent { display: grid; grid-template-columns: 1fr 1fr; }

आखिर "fr" क्या है?!

"fr," फ्रैक्शन का संक्षिप्त रूप, माप की एक नई इकाई है। यह दर्शाता है कि ग्रिड में प्रत्येक आइटम द्वारा उपलब्ध स्पेस का कौन सा अंश उपयोग किया जाएगा।

यह वास्तव में flex नंबर के समान है - दोनों एक चाइल्ड एलिमेंट की अन्य के सापेक्ष सापेक्ष चौड़ाई का प्रतिनिधित्व करते हैं।

CSS ग्रिड बनाना

यहाँ हम एक बार फिर मोबाइल-फर्स्ट दृष्टिकोण से ग्रिड को स्टाइल करेंगे।

मोबाइल पर:

हमेशा की तरह, चाइल्ड कॉलम मोबाइल पर स्टैक होंगे, इसलिए हम कोई CSS ग्रिड स्टाइल सेट नहीं करेंगे।

टैबलेट पर:

हम टैबलेट के लिए एक दूसरे के समान चौड़ाई के दो चाइल्ड एलिमेंट्स चाहते हैं।

.parent { display: grid; grid-template-columns: 1fr 1fr; }

डेस्कटॉप पर:

हम एक बार फिर मेन कॉलम के साइडबार कॉलम की दोगुनी चौड़ाई होने के समान अनुपात करेंगे, जो एक बार फिर 2/3 और 1/3 पर कैलकुलेट होता है।

@media only screen and (min-width: 1025px){ .parent { grid-template-columns: 2fr 1fr; } }

काफी कूल है कि हमें वास्तविक कॉलम पर कोई ग्रिड स्टाइल सेट नहीं करना पड़ता, सिर्फ पैरेंट पर!

CSS ग्रिड अविश्वसनीय रूप से शक्तिशाली है

फ्लेक्सबॉक्स की तरह, CSS ग्रिड केवल दो कॉलम ग्रिड बनाने से कहीं अधिक कर सकता है।

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

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

और यहाँ इसके लिए मेरा कोडपेन है:

See the Pen CSS grid by Jessica (@thecodercoder) on CodePen.

समापन में

यदि आप सोच रहे हैं कि आपके लिए कौन सी विधि सर्वोत्तम है, तो मुझे व्यक्तिगत रूप से लगता है कि फ्लेक्सबॉक्स अभी सबसे अच्छा विकल्प है।

यह काफी समय से मौजूद है कि इसका अच्छा ब्राउज़र समर्थन है, और यह ग्रिड बनाने का एक अच्छा, कुशल तरीका है। इसके अलावा, यह CSS ग्रिड द्वारा पूरी तरह से प्रतिस्थापित नहीं होगा, क्योंकि इसकी ताकत हैं जो CSS ग्रिड के साथ मिलकर अच्छा काम करेंगी।

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

क्या आपका कोई पसंदीदा है? क्या आप फ्लेक्सबॉक्स या CSS ग्रिड सीखने की कोशिश में अटके हैं? नीचे कमेंट छोड़ने के लिए स्वतंत्र महसूस करें।