व्याख्यान 15: सीएसएस ग्रिड - आसानी से कॉम्प्लेक्स लेआउट का निर्माण

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

1. सीएसएस ग्रिड क्या है?

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

2. ग्रिड कैसे बनाएं

ग्रिड का उपयोग शुरू करने के लिए, आपको डिस्प्ले: ग्रिड सेट करके एक कंटेनर को ग्रिड के रूप में परिभाषित करना होगा। फिर, आप ग्रिड-टेम्पलेट-पंक्तियों और ग्रिड-टेम्पलेट-कॉलम गुणों का उपयोग करके पंक्तियों और स्तंभों की संख्या परिभाषित करेंगे।

उदाहरण:

    
1
    
2
    
3
    
4

.grid-container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 100px 100px;
    gap: 10px; /* space between the grid items */
}

.item {
    background-color: #4CAF50;
    padding: 20px;
    color: white;
    text-align: center;
}

यह एक 2x2 ग्रिड बनाता है, जिसमें प्रत्येक सेल 100px x 100px और कोशिकाओं के बीच एक 10px अंतर होता है।

3. ग्रिड क्षेत्रों को परिभाषित करना

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

उदाहरण:

    
Header
    
Sidebar
    
Main Content
    
Footer

.grid-container {
    display: grid;
    grid-template-areas: 
        "header header"
        "sidebar main"
        "footer footer";
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto 1fr auto;
    gap: 10px;
}

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.main {
    grid-area: main;
}

.footer {
    grid-area: footer;
}

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

4. रिस्पॉन्सिव ग्रिड के लिए ऑटो-फिट और ऑटो-फिल

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

उदाहरण:

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

इस उदाहरण में, ग्रिड स्वचालित रूप से कंटेनर के भीतर फिट होने वाले कई कॉलम बनाएगा, प्रत्येक कॉलम कम से कम 150px चौड़ा होगा। यदि अतिरिक्त जगह है, तो शेष क्षेत्र को भरने के लिए कॉलम फैल जाएंगे।

5. ग्रिड संरेखण

आप justify-आइटम और संरेखित-आइटम का उपयोग करके ग्रिड के अंदर आइटम को संरेखित कर सकते हैं।

• justify-आइटम: आइटम को उनके ग्रिड सेल के भीतर क्षैतिज रूप से संरेखित करता है।
• संरेखित-आइटम: आइटम को उनके ग्रिड सेल के भीतर लंबवत रूप से संरेखित करता है।

उदाहरण:

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    align-items: center;
    gap: 10px;
}

.item {
    background-color: #FF5722;
    padding: 20px;
    color: white;
    text-align: center;
}

यह सभी वस्तुओं को उनके ग्रिड कोशिकाओं के भीतर क्षैतिज और लंबवत रूप से केंद्रित करेगा।

6. नेस्टेड ग्रिड

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

उदाहरण:

    

        

            
Nested 1
            
Nested 2
        
    
    
Item 2
    
Item 3

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.nested-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.nested-item {
    background-color: #FFC107;
    padding: 10px;
    color: black;
}

इस उदाहरण में, ग्रिड आइटम में से एक में नेस्टेड ग्रिड होता है, जो अधिक लचीले और विस्तृत लेआउट की अनुमति देता है।

7. ग्रिड बनाम फ्लेक्सबॉक्स: प्रत्येक का उपयोग कब करें

• जब आपको वस्तुओं के लेआउट को एक दिशा (पंक्तियों या स्तंभों) में प्रबंधित करने की आवश्यकता हो तो फ्लेक्सबॉक्स का उपयोग करें।
• जब आपको जटिल, बहुआयामी लेआउट के लिए पंक्तियों और स्तंभों दोनों को एक साथ प्रबंधित करने की आवश्यकता हो तो ग्रिड का उपयोग करें।

निष्कर्ष

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

मुझे लिंक्डइन पर फॉलो करें

रिदोय हसन