रिस्पॉन्सिव ग्रिड बनाने का तरीका जानना वेब डेवलपमेंट का एक अनिवार्य हिस्सा है।
चाहे आप किसी फोटोग्राफर के लिए पोर्टफोलियो पेज बना रहे हों, ई-कॉमर्स साइट या लैंडिंग पेज, यह सब ग्रिड लेआउट पर आधारित होगा। ग्रिड हर जगह हैं।
यदि आप जानते हैं कि एक अच्छा, प्रतिक्रियाशील ग्रिड लेआउट कैसे बनाया जाता है, तो आप तुरंत एक फ्रंट-एंड वेब डेवलपर के रूप में उभर कर सामने आएंगे।
आइए एक ग्रिड क्या है, इसके त्वरित अवलोकन के साथ इसमें शामिल हों:
ग्रिड लेआउट क्या है?
ग्रिड मीडिया में दृश्य तत्वों को व्यवस्थित करने का एक आजमाया हुआ और सही तरीका है।
डिजाइनरों ने प्रिंट समाचार पत्रों और विज्ञापनों के पहले दिनों से ही ग्रिड लागू कर दिए हैं।
ग्रिड का उपयोग करने से सौंदर्य की दृष्टि से मनभावन रचना तैयार होती है जो मस्तिष्क के लिए ग्रहण करने और समझने में आसान होती है। तो यह कुछ ऐसा है जिसे आप निश्चित रूप से अपनी वेबसाइटों में उपयोग करना चाहते हैं।
एक ग्रिड डिजाइन क्षेत्र को स्तंभों में विभाजित करेगा। स्तंभों के बीच एक स्थान, या गटर है।
आम तौर पर आप कुल बारह कॉलम चाहते हैं क्योंकि आप स्पेस को दो या तीन के फ़ैक्टर में विभाजित कर सकते हैं।
आप इस अभ्यास को Studiopress वेबसाइट थीम पर प्रभावी रूप से देख सकते हैं:
कॉलम सभी को समान चौड़ाई का नहीं होना चाहिए। हो सकता है कि आप चाहते हैं कि कुछ कॉलम दो कॉलम में हों, और अन्य चार, छह या अधिक तक फैले हों।
बस सुनिश्चित करें कि पृष्ठ के सभी तत्व किसी एक कॉलम पर शुरू और समाप्त होते हैं।
इसके अलावा, आप अपने लंबवत क्षेत्र को अलग-अलग क्षेत्रों में विभाजित कर सकते हैं, प्रत्येक क्षेत्र में कॉलम चौड़ाई का एक अलग संयोजन होता है।
उतना जटिल नहीं है जितना शुरू में लग रहा था, है ना? तो अब जबकि हम मूल बातें जान गए हैं, तो आपकी वेबसाइट में रिस्पॉन्सिव ग्रिड बनाने का सबसे अच्छा तरीका क्या है?
पढ़ें और पता करें:
रिस्पॉन्सिव ग्रिड बनाने के तरीके
फ्लेक्सबॉक्स और सीएसएस ग्रिड लेआउट के बारे में हाल ही में बहुत चर्चा हुई है।
इन नई CSS तकनीकों से पहले, आपको CSS फ्लोट संपत्ति का उपयोग करना था। आपने कुछ फ़्लोट किए गए स्तंभ तत्व बनाए, प्रतिशत चौड़ाई और मीडिया प्रश्नों के एक समूह में छिड़के और आप जाने के लिए अच्छे थे।
(और फ्लोट ग्रिड से पहले, HTML टेबल ही एकमात्र विकल्प थे। लेकिन हम उन 😉 के बारे में बात नहीं करते हैं)
जब मैं फ्रंट-एंड वेब डेवलपमेंट सीख रहा था, तो मैंने एक उत्तरदायी ढांचे, ज़र्ब फाउंडेशन का उपयोग करना शुरू कर दिया। आप में से कई लोग बूटस्ट्रैप का उपयोग कर सकते हैं।
उत्तरदायी ढांचे वेबसाइटों के निर्माण को बहुत आसान बनाते हैं। वे बहुत बड़े समय बचाने वाले हैं!
हालाँकि, हालाँकि वे आपका समय बचा सकते हैं, लेकिन उन पर बहुत अधिक भरोसा करना अच्छी बात नहीं है। खासकर अगर आप नहीं जानते कि वे क्या कर रहे हैं।
यह समझने की कोशिश करें कि ढांचे के नीचे अंतर्निहित मचान कैसे काम करता है। कुछ कॉलम क्लासेस को अपने डिव में डालना उतना आसान नहीं है, लेकिन आप CSS सिद्धांतों को बेहतर ढंग से समझ पाएंगे।
निचली पंक्ति:यह आपको एक बेहतर वेब डेवलपर बनाएगी।
हमारा मिनी-प्रोजेक्ट
हम तीन अलग-अलग तरीकों का उपयोग करके एक साधारण 2-स्तंभ ग्रिड बनाने के तरीके में गोता लगाने जा रहे हैं:
- फ्लोट,
- फ्लेक्सबॉक्स,
- और CSS ग्रिड लेआउट।
मैं कोड स्निपेट और कुछ ग्राफ़िक्स का उपयोग करके प्रत्येक चरण की व्याख्या करूँगा।
ग्रिड की योजना बनाना
हम जो ग्रिड बनाना चाहते हैं वह एक बुनियादी दो-स्तंभ ग्रिड है। इसमें कई वेबसाइट डिज़ाइनों की तरह एक मुख्य सामग्री क्षेत्र और एक साइडबार है।
एक लेआउट बनाते समय, आपको सबसे पहले यह तय करना होगा कि यह कैसे प्रतिक्रियात्मक रूप से दिखेगा। मतलब, लेआउट को डेस्कटॉप पर देखने पर, टैबलेट या मोबाइल पर देखने की तुलना में कैसे बदलेगा।
निर्माण शुरू करते समय मैं जिस एक रणनीति का उपयोग करता हूं, वह यह लिखना है कि सभी उपकरणों में डिज़ाइन कैसे बदलेगा। यहाँ इस अभ्यास के लिए मेरे नोट्स हैं:
मोबाइल . पर , हम चाहते हैं कि कॉलम ढेर हों, मुख्य सामग्री शीर्ष पर और साइडबार इसके नीचे। दोनों की चौड़ाई 100% होगी।
टैबलेट . पर , हम चाहते हैं कि कॉलम अगल-बगल हों, जिनमें से प्रत्येक में 50% चौड़ाई हो।
डेस्कटॉप . पर , हम चाहते हैं कि मुख्य सामग्री कॉलम 2/3 चौड़ाई और साइडबार 1/3 चौड़ाई ले।
और हम यही चाहते हैं कि ग्रिड उनमें से प्रत्येक ब्रेकप्वाइंट की तरह दिखे:
यह समय से पहले थोड़ा अतिरिक्त काम है, लेकिन यह योजना आपका समय बचाएगी क्योंकि आप जानते हैं कि आपको क्या बनाना है। जब आप बड़ी और अधिक जटिल परियोजनाओं पर काम करते हैं तो यह तकनीक विशेष रूप से उपयोगी होती है।
अब हमारे पास बुनियादी जानकारी है जो हमें अपना ग्रिड बनाना शुरू करने के लिए चाहिए!
फ्लोट ग्रिड
आप सोच रहे होंगे कि हम फ्लोट ग्रिड को क्यों कवर कर रहे हैं, क्योंकि फ्लेक्सबॉक्स और सीएसएस ग्रिड काम कर रहे हैं। मैं अभी भी इसे यहां शामिल कर रहा हूं क्योंकि कुछ किनारे के मामले हो सकते हैं जहां आपको फ्लोट जानने की आवश्यकता होगी, खासकर पुराने इंटरनेट एक्सप्लोरर ब्राउज़र के साथ।
सीएसएस में फ्लोट संपत्ति मूल रूप से एक छवि के चारों ओर पाठ को प्रवाहित करने की अनुमति देने जैसे उपयोगों के लिए अभिप्रेत थी। छवि को एक फ्लोट देना:बायां नियम सेट छवि को संरेखित करेगा, या पैरेंट तत्व के बाईं ओर "फ्लोट" करेगा।
फ्लोट के साथ ग्रिड बनाना
एक ग्रिड बनाने के लिए, आप कई तत्वों को एक फ्लोट प्रॉपर्टी देंगे, जिससे वे सभी एक तरफ, दाएं या बाएं संरेखित हो जाएंगे।
.column {
display: block;
float: left;
}बहुत सीधा लगता है, है ना?
हालांकि, फ्लोट के बारे में एक कष्टप्रद पहलू यह है कि यह तत्व को दस्तावेज़ के सामान्य प्रवाह से बाहर ले जाता है।
नीचे दी गई यह छवि दिखाती है कि क्या होता है जब नीले फ़्लोट किए गए स्तंभों को सामान्य प्रदर्शन से बाहर निकाल दिया जाता है। ग्रे पैरेंट डिव तब ऊंचाई तक गिर जाएगा, अगर उसके कोई बच्चे न हों।
आप इस समस्या को दो तरीकों से ठीक कर सकते हैं।
आप एक display: table जोड़ सकते हैं मूल तत्व के लिए नियम। या आप :after . जोड़कर फ़्लोट्स को साफ़ कर सकते हैं फ़्लोट्स को साफ़ करने के लिए निम्नलिखित शैलियों के साथ माता-पिता के लिए छद्म तत्व।
.parent:after
{
clear: both;
content: "";
display: block;
}एक अन्य नोट यह है कि यदि आप पैडिंग और मार्जिन का उपयोग कर रहे हैं (जो मूल रूप से हमेशा होता है) तो आपको प्रत्येक तत्व पर बॉक्स-साइज़िंग:बॉर्डर-बॉक्स सेट करना होगा।
तत्वों की अंतिम चौड़ाई और ऊंचाई की गणना करते समय इस घोषणा में पैडिंग और मार्जिन शामिल हैं। यह सुनिश्चित करता है कि तत्व पृष्ठ से बाहर नहीं जाएंगे।
*, *: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%;
}
}आप यहां मेरे कोडपेन पर सक्रिय कोड देख सकते हैं:
कोडपेन पर जेसिका (@thecodercoder) द्वारा पेन फ्लोट ग्रिड देखें।
यह अपेक्षाकृत सरल लगता है, है ना? फ़्लोट्स भयानक नहीं हैं- वे सभी हमारे पास काफी समय से थे।
लेकिन जैसे-जैसे हम फ्लेक्सबॉक्स की ओर बढ़ते हैं, मुझे लगता है कि आप देखेंगे कि कैसे फ्लोट ग्रिड थोड़े हैकी हैं, और फ्लेक्सबॉक्स अधिक सहज है।
फ्लेक्सबॉक्स ग्रिड
फ्लेक्सबॉक्स का उपयोग करके एक प्रतिक्रियाशील ग्रिड बनाने के लिए, हम ऊपर के समान HTML का उपयोग करेंगे, एक पैरेंट डिव के साथ जिसमें दो चाइल्ड कॉलम डिव हैं।
आपको सबसे पहले यह घोषित करना होगा कि माता-पिता को फ्लेक्सबॉक्स का उपयोग करना चाहिए:
.parent {
display: flex;
}फिर कॉलम डिव पर फ्लेक्स प्रॉपर्टी सेट करें:
.column {
flex: 1;
}
flex: 1 डिक्लेरेशन का मतलब है कि प्रत्येक कॉलम डिव की चौड़ाई अन्य कॉलम की तरह ही होगी। यह एक अनुपात की तरह है।
यदि आप चाहते हैं कि पहला कॉलम दूसरे कॉलम की चौड़ाई से दोगुना हो, तो आप पहले कॉलम के फ्लेक्स को 2 पर सेट कर देंगे। और दूसरे कॉलम का फ्लेक्स वैल्यू आधा होगा, 1.
आरंभ करने के लिए आपको बस इतना ही चाहिए!
फ्लेक्सबॉक्स बहुत बुद्धिमान है, और यह स्वचालित रूप से ग्रिड स्पेस को कॉलम के बीच समान रूप से विभाजित कर देगा, चाहे आपके पास कितने भी हों।
ऊपर दिए गए CSS की तुलना फ्लोट ग्रिड के लिए उपयोग करने के लिए करें, और मुझे लगता है कि आप मुझसे सहमत होंगे कि फ्लेक्सबॉक्स सरल है।
फ्लेक्स ग्रिड बनाना
अब, अपने दो-स्तंभों को प्रतिक्रियाशील ग्रिड बनाने के लिए, हम वही करेंगे जो हमने फ्लोट ग्रिड के लिए किया था और पहले मोबाइल के लिए अपनी डिफ़ॉल्ट शैलियों को सेट करेंगे।
मोबाइल के लिए:
हमें मोबाइल पर फ्लेक्सबॉक्स की आवश्यकता नहीं है, केवल टैबलेट और डेस्कटॉप पर, इसलिए पैरेंट डिव को display: flex की आवश्यकता नहीं है घोषणा अभी बाकी है।
हम चाहते हैं कि कॉलम डिव चौड़ाई का 100% हो। यदि आप चाहें तो कॉलम पर स्पष्ट रूप से चौड़ाई:100% घोषणा सेट कर सकते हैं।
या आप केवल चौड़ाई शैली घोषित नहीं कर सकते हैं। Div आमतौर पर डिफ़ॉल्ट रूप से display: block . होगा और स्वचालित रूप से 100% चौड़ाई हो।
टैबलेट के लिए:
टैबलेट से शुरू करते हुए हम फ्लेक्सबॉक्स में जोड़ेंगे, और टैबलेट की चौड़ाई और ऊपर की शैलियों के लिए मीडिया क्वेरी का उपयोग करेंगे।
सबसे पहले, हम फ्लेक्सबॉक्स बनाएंगे और पैरेंट को उपयोग करने के लिए सेट करेंगे display: flex ।
हम चाहते हैं कि कॉलम इस चौड़ाई में समान दूरी पर हों, इसलिए हम flex: 1 का उपयोग करेंगे सभी कॉलम divs के लिए घोषणा। 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 फ्लेक्सबॉक्स को कितनी कम आवश्यकता है। और यह जो ग्रिड बनाता है वह फ्लोट ग्रिड के समान ही होता है।
फ्लेक्सबॉक्स के बारे में मुझे जो पसंद है वह यह है कि यह सिर्फ काम करता है . यह सहज है।
सालों तक सीएसएस फ्लोट के साथ कुश्ती करने के बाद, मुझे विश्वास नहीं हो रहा था कि ग्रिड बनाना कितना आसान है।
फ्लेक्सबॉक्स में और भी उन्नत गुण हैं जिनका आप लाभ उठा सकते हैं:
- कॉलम आइटम को क्षैतिज या लंबवत रूप से संरेखित करें (हां, लंबवत !!)।
- वस्तुओं को केंद्र में रखें या उन्हें ग्रिड पैरेंट के बाएं और दाएं किनारों तक विस्तारित करें।
- विभिन्न ब्रेकप्वाइंट पर आइटम का क्रम बदलें।
आप सीएसएस ट्रिक्स और मोज़िला पर इन लेखों पर फ्लेक्सबॉक्स क्या कर सकते हैं, इसके बारे में अधिक पढ़ सकते हैं।
और यहाँ फ्लेक्स ग्रिड के लिए कोडपेन है:
कोडपेन पर जेसिका (@thecodercoder) का पेन फ्लेक्स ग्रिड देखें।
आपको फिर कभी फ्लोट्स का उपयोग नहीं करना पड़ेगा। बेशक, जब तक आप किसी इमेज के चारों ओर टेक्स्ट नहीं लपेट रहे हों।
कुछ और मस्ती के लिए तैयार हैं? आइए अंतिम ग्रिड विधि पर चलते हैं:
CSS ग्रिड लेआउट
CSS ग्रिड ग्रिड बनाने का सबसे नया तरीका है। यह फ्लेक्सबॉक्स के समान है, फिर भी बहुत अलग है।
CSS ग्रिड पर जाने-माने विशेषज्ञ रेचल एंड्रयू के अनुसार, उनमें से प्रत्येक के पास ताकत है:
- फ्लेक्सबॉक्स एक दिशा में व्यवस्थित तत्वों के लिए उपयोगी है, या तो एक पंक्ति या एक स्तंभ में।
- सीएसएस ग्रिड पंक्तियों और स्तंभों वाली व्यवस्थाओं के लिए उपयोगी है।
वह इस लेख में और अधिक बताती हैं कि फ्लेक्सबॉक्स के विपरीत, हेडर, पाद लेख, सामग्री और साइडबार वाले विशिष्ट वेबसाइट लेआउट के लिए सीएसएस ग्रिड बेहतर क्यों है।
वर्तमान में, CSS ग्रिड का मुख्य दोष यह है कि यह सभी ब्राउज़रों द्वारा सार्वभौमिक रूप से समर्थित नहीं है।
क्रोम, आईओएस सफारी और एंड्रॉइड के पुराने संस्करण इसका बिल्कुल भी समर्थन नहीं करते हैं। और IE और Edge सपोर्ट धब्बेदार है।
यदि आप 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 ग्रिड स्टाइल सेट नहीं किया है।
टैबलेट पर:
हम टेबलेट के लिए समान चौड़ाई के दो चाइल्ड एलिमेंट एक दूसरे के लिए चाहते हैं।
.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 ग्रिड के बारे में अधिक पढ़ने में रुचि रखते हैं, तो रेचल एंड्रयू की वेबसाइट ग्रिड बाय उदाहरण या मोज़िला लेख, "ग्रिड लेआउट की बुनियादी अवधारणाएँ" देखें।
और इसके लिए मैंने जो कोडपेन बनाया है वह यह है:
कोडपेन पर जेसिका (@thecodercoder) द्वारा पेन सीएसएस ग्रिड देखें।
समापन होने पर
यदि आप सोच रहे हैं कि आपके लिए कौन सा तरीका सबसे अच्छा है, तो मुझे व्यक्तिगत रूप से लगता है कि फ्लेक्सबॉक्स अभी सबसे अच्छा विकल्प है।
यह काफी लंबा रहा है कि इसमें अच्छा ब्राउज़र समर्थन है, और यह ग्रिड बनाने का एक अच्छा, कुशल तरीका है। साथ ही, इसे CSS ग्रिड से पूरी तरह से बदला नहीं जाएगा, क्योंकि इसमें ऐसी ताकत है जो CSS ग्रिड के साथ मिलकर काम करेगी।
अंत में, CSS ग्रिड अभी भी अधिक ब्राउज़र समर्थन प्राप्त करने की दिशा में काम कर रहा है। लेकिन आपको इसे अभी सीखना शुरू कर देना चाहिए, थोड़ा सा भी। वेबसाइट लेआउट बनाने के लिए CSS ग्रिड को उद्योग मानक बनने में ज्यादा समय नहीं लगेगा।
क्या आपका कोई प्रिय है? क्या आप फ्लेक्सबॉक्स या सीएसएस ग्रिड सीखने की कोशिश में फंस गए हैं? नीचे एक टिप्पणी छोड़ने के लिए स्वतंत्र महसूस करें।