जटिल लेआउट को आसानी से बनाने के लिए सीएसएस ग्रिड का उपयोग करना सीखें।
जटिल लेआउट के साथ काम करते समय किसी वेबपेज पर तत्वों की स्थिति निर्धारण करना बहुत जटिल हो सकता है। यहीं पर सीएसएस ग्रिड काम आता है। यह एक लेआउट सिस्टम है जिसे जटिल लेआउट बनाने की प्रक्रिया को सरल बनाने के लिए डिज़ाइन किया गया है।
यह आपकी कैसे मदद करता है? पारंपरिक लेआउट विधियों के विपरीत जो आपको केवल पंक्तियों या स्तंभों में तत्वों को रखने की अनुमति देती है, सीएसएस ग्रिड आपको दोनों दुनियाओं का सर्वश्रेष्ठ प्रदान करता है - पंक्तियों और स्तंभों का उपयोग करके एक 2डी दृष्टिकोण।
ग्रिड कंटेनर और आइटम
आप सीएसएस ग्रिड गुणों को दो मुख्य प्रकार के तत्वों पर लागू कर सकते हैं: माता-पिता और बच्चे। जब आप किसी मूल तत्व के लिए डिस्प्ले प्रॉपर्टी को "ग्रिड" पर सेट करते हैं, तो यह उस तत्व को ग्रिड कंटेनर में बदल देता है। इस ग्रिड कंटेनर के भीतर कोई भी चाइल्ड तत्व एक ग्रिड आइटम बन जाता है, जो लागू ग्रिड गुणों को प्राप्त करता है।
यहां बताया गया है कि इसका प्रतिनिधित्व कैसे किया जाता है:
एक ग्रिड आइटम ग्रिड कंटेनर भी बन सकता है। अब आप लेआउट को नेस्टेड ग्रिड के रूप में संदर्भित कर सकते हैं - ग्रिड के भीतर एक ग्रिड। मुख्य ग्रिड कंटेनर को अब बाहरी ग्रिड के रूप में जाना जाता है, जबकि आइटम-टर्न-ग्रिड कंटेनर एक आंतरिक ग्रिड बन जाता है।
इनमें से प्रत्येक ग्रिड दूसरे से स्वतंत्र रूप से संचालित होता है, जिसका अर्थ है कि आंतरिक ग्रिड के लिए निर्धारित गुण बाहरी ग्रिड के लेआउट को प्रभावित नहीं करते हैं, और इसके विपरीत।
यहाँ यह कैसा दिखता है:
ग्रिड कंटेनरों और वस्तुओं के बीच संबंधों में महारत हासिल करना आवश्यक है द्वि-आयामी लेआउट का निर्माण प्रभावी रूप से।
ध्यान रखें कि ग्रिड कंटेनर के लिए ग्रिड गुण हैं, जबकि अन्य ग्रिड आइटम के लिए हैं।
ग्रिड लाइनें और ट्रैक
इससे पहले कि आप सीएसएस ग्रिड का उपयोग शुरू करें, दो प्रमुख शब्द हैं जिनसे आपको परिचित होना चाहिए:
- ग्रिड लाइनें: ग्रिड लाइनें क्षैतिज और ऊर्ध्वाधर रेखाओं को संदर्भित करती हैं जो सीएसएस ग्रिड लेआउट में ग्रिड बनाती हैं। वे पंक्तियों और स्तंभों के शुरुआती और अंतिम बिंदुओं को निर्दिष्ट करते हैं, जिससे यह व्यवस्थित करने में मदद मिलती है कि चीजें ग्रिड पर कहां जाती हैं। ये रेखाएँ बक्सों के किनारों की तरह हैं; उनके पास संख्याएँ होती हैं जो स्थिति निर्धारित करते समय तत्वों को संदर्भित करने में आपकी सहायता करती हैं। यहां लाल धराशायी रेखा उनका प्रतिनिधित्व करती है:
- ग्रिड ट्रैक: वे ग्रिड रेखाओं के बीच के अंतराल हैं जो पंक्तियों और स्तंभों को परिभाषित करते हैं। वे ग्रिड लेआउट के बिल्डिंग ब्लॉक्स की तरह हैं। उपरोक्त छवि में, प्रत्येक आइटम के भीतर का रंगीन क्षेत्र ग्रिड ट्रैक का प्रतिनिधित्व करता है।
ग्रिड लाइनों और ट्रैकों को ग्रिड लेआउट के बिल्डिंग ब्लॉक्स के रूप में सोचें, जैसे ग्राफ़ पेपर की शीट पर लाइनें। जब एक क्षैतिज ग्रिड रेखा एक ऊर्ध्वाधर ग्रिड रेखा के साथ प्रतिच्छेद करती है, तो यह एक बॉक्स के आकार का सेल बनाती है। ये सेल कंटेनर के रूप में कार्य करते हैं जहां आप अपने ग्रिड आइटम रख सकते हैं।
सीएसएस ग्रिड कंटेनर गुण
ये वे गुण हैं जिन्हें आप लेआउट को व्यवस्थित करने और इसके भीतर तत्वों की स्थिति में सहायता करने के लिए ग्रिड कंटेनर पर लागू कर सकते हैं। जैसा कि पहले उल्लेख किया गया है, उनमें से एक ग्रिड पर सेट डिस्प्ले प्रॉपर्टी है। यहाँ और भी हैं:
ग्रिड टेम्पलेट
यह गुण पंक्तियों और स्तंभों के आकार को परिभाषित करता है। आप इन गुणों को पिक्सेल, प्रतिशत या भिन्नात्मक इकाई (fr) का उपयोग करके आकार दे सकते हैं। इसके अलावा, आप जैसे कीवर्ड का उपयोग कर सकते हैं ऑटो, न्यूनतम अधिकतम(), और दोहराना() लचीलापन बढ़ाने के लिए.
- ग्रिड-टेम्पलेट-पंक्तियाँ: पंक्ति की ऊँचाई निर्धारित करता है।
- ग्रिड-टेम्पलेट-कॉलम: कॉलम की चौड़ाई परिभाषित करता है।
यहां कुछ उदाहरण दिए गए हैं:
पिक्सेल का उपयोग करना:
.grid-container {
display: grid;
grid-template-columns: 250px 250px 250px;
grid-template-rows: 250px 250px;
}प्रतिशत का उपयोग करना:
.grid-container {
grid-template-columns: 25% 50% 25%;
grid-template-rows: 50% 50%;
}Fr का उपयोग करना:
.grid-container {
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 2fr;
}
ऑटो और मिनमैक्स() कीवर्ड का उपयोग करना:
.grid-container {
grid-template-columns: autominmax(150px, 1fr) auto;
grid-template-rows: 100pxauto;
}
लगातार आकार देने के लिए रिपीट() का उपयोग करना:
.grid-container {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 150px);
}
ऑटो प्लेसमेंट और ग्रिड टेम्पलेट क्षेत्र
ऑटो प्लेसमेंट: ऑटो प्लेसमेंट ग्रिड को यह तय करने देने जैसा है कि आइटम कहां रखना है। यदि आप सटीक स्थिति निर्दिष्ट नहीं करते हैं, तो ग्रिड स्वचालित रूप से आइटम को उसी क्रम में रखेगा जिस क्रम में वे मार्कअप में दिखाई देते हैं। यह तब मददगार होता है जब आपके पास कई आइटम हों और आप चाहते हों कि वे ग्रिड को समान रूप से भरें।
ग्रिड टेम्पलेट क्षेत्र: नामित क्षेत्रों का उपयोग करके एक लेआउट बनाने के रूप में ग्रिड टेम्पलेट क्षेत्रों के बारे में सोचें। यह एक फ्लोर प्लान पर कमरों का नामकरण करने जैसा है। ग्रिड आइटम की स्थिति निर्धारित करते समय आप इन क्षेत्र नामों का उल्लेख कर सकते हैं। उदाहरण के लिए:
.grid-container {
grid-template-areas:'headerheaderheaderheader'
'sidebarmainmainright'
'sidebarcontentcontentright'
'footerfooterfooterfooter';
}
यह लेआउट तीन कॉलम और चार पंक्तियों वाले ग्रिड की तरह है। मुख्य सामग्री क्षेत्र के लिए दो पंक्तियाँ हैं। लेबल किए गए क्षेत्रों में "हेडर," "साइडबार," "कंटेंट," और "फुटर" शामिल हैं। अगले अनुभागों में, आप सीखेंगे कि प्रत्येक ग्रिड आइटम के गुणों में इन क्षेत्र लेबलों का उपयोग कैसे करें।
सीएसएस ग्रिड में संरेखण
आप ग्रिड आइटमों की ग्रिड कोशिकाओं के भीतर स्थिति को नियंत्रित करने के लिए संरेखण गुणों का उपयोग कर सकते हैं। गुण हैं:
-
औचित्य-आइटम: उनके ग्रिड सेल के भीतर वस्तुओं के क्षैतिज संरेखण को नियंत्रित करता है।
- मान: प्रारंभ, अंत, केंद्र, और विस्तार।
-
संरेखित-आइटम: उनके ग्रिड सेल के भीतर वस्तुओं के लंबवत संरेखण को नियंत्रित करता है।
- मान: प्रारंभ, अंत, केंद्र, और विस्तार।
-
औचित्य-सामग्री: कंटेनर के भीतर संपूर्ण ग्रिड को क्षैतिज अक्ष के साथ संरेखित करता है।
- मान: प्रारंभ, अंत, केंद्र, खिंचाव, स्थान-बीच, स्थान-चारों ओर, और स्थान-समान रूप से।
-
संरेखित-सामग्री: कंटेनर के भीतर संपूर्ण ग्रिड को ऊर्ध्वाधर अक्ष के साथ संरेखित करता है।
- मान: प्रारंभ, अंत, केंद्र, खिंचाव, स्थान-बीच, स्थान-चारों ओर, और स्थान-समान रूप से।
यहाँ एक उदाहरण है:
.grid-container {
grid-template-columns: 1fr 1fr;
justify-items: center;
align-items: center;
justify-content: space-between;
align-content: center;
}इस उदाहरण में, आइटम अपनी कोशिकाओं के भीतर क्षैतिज और लंबवत दोनों तरह से केंद्रित होंगे। पूरे ग्रिड के स्तंभों के बीच स्थान समान रूप से वितरित किया जाएगा, और ग्रिड कंटेनर में लंबवत रूप से केन्द्रित होगा।
ग्रिड गैप
ग्रिड गैप ग्रिड लेआउट में पंक्तियों और स्तंभों के बीच की जगह को संदर्भित करता है। यह दृश्य पृथक्करण बनाने में मदद करता है और ग्रिड वस्तुओं के बीच कुछ जगह जोड़ता है।
ग्रिड-अंतराल संपत्ति आपको पंक्तियों और स्तंभों के बीच अंतर निर्धारित करने की अनुमति देती है। आप इसे परिभाषित करने के लिए विभिन्न इकाइयों का उपयोग कर सकते हैं, जैसे पिक्सेल (पीएक्स), प्रतिशत (%), ईएम इकाइयां (ईएम), और बहुत कुछ।
.grid-container {
grid-gap: 20px;
}इस उदाहरण में, ग्रिड कंटेनर में दो कॉलम हैं जिनके बीच 20-पिक्सेल का अंतर है। यह रिक्ति दृश्य रूप से स्तंभों को अलग करती है और लेआउट को बढ़ाती है।
सीएसएस ग्रिड आइटम गुण
यहां कुछ प्रमुख गुण दिए गए हैं जो उदाहरणों के साथ सीएसएस ग्रिड लेआउट के भीतर व्यक्तिगत ग्रिड आइटम के व्यवहार को नियंत्रित करते हैं:
ग्रिड-पंक्ति-प्रारंभ और ग्रिड-पंक्ति-अंत:
- किसी आइटम के लिए आरंभ और समाप्ति पंक्ति रेखाओं को परिभाषित करता है।
- मान पंक्ति संख्याएँ, "स्पैन एन," या "ऑटो" हो सकते हैं।
.grid-item-1 {
grid-row-start: 2;
grid-row-end: 4;
}
यह कोड स्थान देता है ग्रिड आइटम 1 दूसरी पंक्ति की पंक्ति से चौथी पंक्ति की पंक्ति तक।
ग्रिड-कॉलम-प्रारंभ और ग्रिड-कॉलम-अंत:
- किसी आइटम के लिए शुरुआती और अंतिम कॉलम पंक्तियों को परिभाषित करता है।
- मान पंक्ति संख्याएँ, "स्पैन एन" या "ऑटो" हो सकते हैं।
.grid-item-2 {
grid-column-start: 1;
grid-column-end: 3;
}
यह कोड स्थान देता है ग्रिड आइटम 2 पहली कॉलम लाइन से तीसरी कॉलम लाइन तक।
ग्रिड-क्षेत्र:
- नामित ग्रिड लाइनों को संदर्भित करके ग्रिड के भीतर ग्रिड आइटम का आकार और स्थिति निर्दिष्ट करता है ग्रिड-टेम्पलेट-क्षेत्र.
- जैसा कि पहले उल्लेख किया गया है, पूर्वनिर्धारित क्षेत्र नाम पहले से ही उपयोग में हैं ग्रिड-टेम्पलेट-क्षेत्र संपत्ति। इसका एक साथ उपयोग कैसे करें इसका एक उदाहरण यहां दिया गया है ग्रिड-क्षेत्र.
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.content {
grid-area: content;
}
.right {
grid-area: right;
}
.footer {
grid-area: footer;
}यहाँ परिणाम है:
औचित्य-स्वयं:
- अपने सेल के भीतर अलग-अलग आइटम को क्षैतिज रूप से संरेखित करता है।
- मान प्रारंभ, अंत, केंद्र और विस्तार हो सकते हैं।
.grid-item-5 {
justify-self: center;
}
यह कोड क्षैतिज रूप से केन्द्रित है ग्रिड आइटम 5 इसकी कोशिका के भीतर.
संरेखित-स्वयं:
- इसके सेल के भीतर अलग-अलग आइटम को लंबवत रूप से संरेखित करें।
- मान प्रारंभ, अंत, केंद्र और विस्तार हो सकते हैं।
.grid-item-1 {
align-self: end;
}
यह कोड संरेखित होता है ग्रिड आइटम 1 इसकी कोशिका के नीचे तक.
अपने सीएसएस ग्रिड में प्रत्येक ग्रिड आइटम के लिए इच्छित लेआउट और लुक बनाने के लिए इन गुणों को संयोजित और अनुकूलित करने के लिए स्वतंत्र महसूस करें।
सीएसएस ग्रिड का उपयोग करके उत्तरदायी लेआउट बनाना
के लिए सीएसएस ग्रिड का उपयोग करना प्रतिक्रियाशील लेआउट बनाना यह सुनिश्चित करना महत्वपूर्ण है कि आपका वेबपेज विभिन्न स्क्रीन आकारों और उपकरणों के लिए सहजता से अनुकूल हो। आप ये तरीके लागू कर सकते हैं:
- मीडिया के प्रश्नों: आप मीडिया प्रश्नों का उपयोग कर सकते हैं स्क्रीन आकार के आधार पर विभिन्न ग्रिड लेआउट लागू करने के लिए। उदाहरण के लिए, आपको छोटी स्क्रीन के लिए ग्रिड आइटम को पुनर्व्यवस्थित करने या कॉलम की चौड़ाई समायोजित करने की आवश्यकता हो सकती है।
- लचीली इकाइयाँ: उपलब्ध स्थान के अनुपातिक रूप से समायोजित करने के लिए ग्रिड आइटम और कॉलम को सक्षम करने के लिए प्रतिशत और एफआर जैसी सापेक्ष इकाइयों का उपयोग करें।
- न्यूनतम अधिकतम(): उपयोग न्यूनतम अधिकतम() ग्रिड स्तंभों या पंक्तियों के लिए आकारों की एक श्रृंखला निर्दिष्ट करने का कार्य। यह सुनिश्चित करता है कि आइटम विभिन्न स्क्रीन पर बहुत छोटे या बहुत बड़े दिखाई नहीं देंगे।
कॉलम और ग्रिड आइटम, फ़ॉन्ट आकार और मार्जिन के बीच अंतराल जैसे अन्य तत्वों को समायोजित करना याद रखें। यह एक सुसंगत और अच्छी तरह से डिज़ाइन किया गया लेआउट सुनिश्चित करता है जो विभिन्न उपकरणों पर अच्छा काम करता है।
सीएसएस ग्रिड लेआउट की संभावनाओं का पता लगाएं
सीएसएस ग्रिड के लचीलेपन और शक्ति को अपनाने से आपको ऐसे लेआउट तैयार करने की अनुमति मिलेगी जो न केवल शानदार दिखते हैं बल्कि आधुनिक वेब डिज़ाइन की मांगों के लिए सहजता से अनुकूलित भी होते हैं। तो, ग्रिड की दुनिया में उतरें, संभावनाओं का पता लगाएं और अपने वेब विकास कौशल को बढ़ाएं।
जैसे ही आप लेआउट सिस्टम में गहराई से उतरते हैं, आप सीएसएस ग्रिड के साथ अन्य लेआउट विधियों की तुलना करना चाह सकते हैं। आप सीएसएस फ्लेक्सबॉक्स मॉड्यूल के साथ ऐसा कर सकते हैं। इससे आपको किसी प्रोजेक्ट पर काम करते समय निर्णय लेना सीखने में मदद मिलेगी।
