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

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

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

CSS ग्रिड का उपयोग क्यों करें?

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

1. लचीलापन: सरल से जटिल तक कोई भी ऐसा लेआउट बनाएं जिसका आप सपना देख सकें।
2. परिशुद्धता: न्यूनतम प्रयास के साथ रिक्ति, संरेखण और क्रम पर नियंत्रण।
3. सरलता: साफ, पढ़ने योग्य कोड जिसे बनाए रखना और संशोधित करना आसान है।

अपना ग्रिड स्थापित करना: मूल बातें

आइए बुनियादी बातों से शुरू करें। ग्रिड बनाने के लिए, आपको एक ग्रिड कंटेनर और कुछ ग्रिड आइटम की आवश्यकता होगी। कंटेनर वह जगह है जहां जादू होता है, और आइटम वे तत्व हैं जो ग्रिड पर रखे जाते हैं।

    
1
    
2
    
3
    
4

अब, आइए उस कंटेनर को आपके सीएसएस में एक ग्रिड में बदल दें:

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

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

ग्रिड गुणों को समझना

आइए इसे तोड़ें:

• डिस्प्ले: ग्रिड: यह आपके कंटेनर को ग्रिड में बदल देता है।
• ग्रिड-टेम्पलेट-कॉलम: दोहराएँ(2, 1fr): यह दो समान-चौड़ाई वाले कॉलम बनाता है। 1fr एक लचीली इकाई है जो उपलब्ध स्थान का एक हिस्सा लेती है।
• अंतर: 10px: यह आपके ग्रिड आइटम्स के बीच 10px अंतर जोड़ता है।

ग्रिड पर आइटम रखना: आप बॉस हैं

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

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto;
    gap: 10px;
}

.grid-item:first-child {
    grid-column: 1 / 3;
}

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

उन्नत ग्रिड तकनीकें: अपने भीतर के वास्तुकार को उजागर करें

चीजों को एक पायदान ऊपर ले जाने के लिए तैयार हैं? सीएसएस ग्रिड केवल वस्तुओं को बक्सों में रखने के बारे में नहीं है; यह सटीकता और आसानी से संपूर्ण लेआउट बनाने के बारे में है।

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

इसे ग्रिड के भीतर ग्रिड के रूप में सोचें - लेआउट संभावनाओं की शुरुआत।

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
}

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

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

2. स्वतः भरण और स्वतः फ़िट

क्या आप चाहते हैं कि आपका ग्रिड उपलब्ध स्थान के आधार पर अनुकूलित हो? ऑटो-फिल और ऑटो-फ़िट से मिलें।

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

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

ऊपर लपेटकर

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

हैप्पी कोडिंग!