No history yet

Modern Layout Mastery

मॉडर्न वेब लेआउट्स

अगर आप HTML और CSS के बेसिक्स जानते हैं, तो अब समय है आगे बढ़ने का। इस सेक्शन में हम सिर्फ टैग्स और प्रॉपर्टीज की बात नहीं करेंगे, बल्कि रियल-वर्ल्ड वेबसाइट्स के लिए कॉम्प्लेक्स और रिस्पॉन्सिव लेआउट बनाना सीखेंगे। हमारा फोकस दो सबसे पावरफुल टूल्स पर होगा: Flexbox और CSS Grid।

Flexbox की एडवांस्ड टेक्निक्स

Flexbox एक-डायमेंशनल लेआउट के लिए बेहतरीन है, जैसे नेविगेशन बार या आइटम्स की एक लिस्ट। लेकिन इसकी असली पावर एडवांस्ड अलाइनमेंट और ऑर्डरिंग में छिपी है।

justify-content और align-items से तो आप शायद परिचित होंगे, जो पूरे कंटेनर के हिसाब से आइटम्स को अलाइन करते हैं। लेकिन align-self प्रॉपर्टी आपको किसी एक अकेले फ्लेक्स-आइटम को दूसरों से अलग अलाइन करने की सुविधा देती है। मान लीजिए, आपके नेविगेशन में बाकी सारे लिंक्स टॉप पर हैं, लेकिन 'Logout' बटन को आप नीचे दिखाना चाहते हैं।

.nav-container {
  display: flex;
  align-items: flex-start; /* Default for all items */
}

.logout-button {
  align-self: flex-end; /* Overrides the container's alignment */
  margin-left: auto; /* Pushes it to the far right */
}

इसी तरह, order प्रॉपर्टी से आप HTML स्ट्रक्चर को बदले बिना आइटम्स का विज़ुअल ऑर्डर बदल सकते हैं। यह रिस्पॉन्सिव डिज़ाइन में बहुत काम आता है, जहाँ आप मोबाइल पर एक एलिमेंट को पहले और डेस्कटॉप पर बाद में दिखाना चाहते हैं।

.item-a { order: 2; } /* A को B के बाद दिखाएगा */
.item-b { order: 1; }

CSS Grid के साथ 2D लेआउट

जब लेआउट में रो और कॉलम दोनों हों, तो CSS Grid सबसे अच्छा टूल है। Grid की सबसे खासियतों में से एक है grid-template-areas। इससे आप अपने लेआउट को विज़ुअली, नाम देकर डिफाइन कर सकते हैं। यह कोड को बहुत साफ़ और समझने में आसान बना देता है।

सोचिए, आप ASCII आर्ट की तरह अपने वेबपेज का पूरा स्ट्रक्चर बना रहे हैं। grid-template-areas ठीक यही करता है।

जैसे, एक क्लासिक ब्लॉग लेआउट बनाने के लिए:

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

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main-content { grid-area: main; }
.footer { grid-area: footer; }

इस अप्रोच से, आप मीडिया क्वेरीज़ में बस grid-template-areas को बदलकर पूरे लेआउट को मोबाइल के लिए आसानी से बदल सकते हैं, बिना किसी फ्लोट या पोजिशनिंग हैक्स के।

रिस्पॉन्सिव और हाइब्रिड लेआउट्स

एक सच में मॉडर्न लेआउट वो है जो हर स्क्रीन साइज पर अच्छा दिखे। CSS Grid इसे minmax() और auto-fill की मदद से बहुत आसान बना देता है। आप एक ऐसी ग्रिड बना सकते हैं जो खुद-ब-खुद आइटम्स को अगली लाइन में भेज देगी और कॉलम्स की संख्या को उपलब्ध जगह के हिसाब से एडजस्ट कर लेगी।

यह एक ई-कॉमर्स प्रोडक्ट लिस्टिंग के लिए परफेक्ट है:

.product-grid {
  display: grid;
  /* हर कॉलम कम-से-कम 250px का होगा, 
     लेकिन ज़्यादा जगह होने पर बराबर फैल जाएगा। */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

यहाँ कोई मीडिया क्वेरी की ज़रूरत नहीं है! ग्रिड अपने आप रिस्पॉन्सिव है।

लेकिन सबसे पावरफुल लेआउट्स तब बनते हैं जब आप Grid और Flexbox को एक साथ इस्तेमाल करते हैं। एक सामान्य नियम है: पेज के ओवरऑल बड़े स्ट्रक्चर (मैक्रो लेआउट) के लिए Grid का इस्तेमाल करें और उस स्ट्रक्चर के अंदर के छोटे कंपोनेंट्स (माइक्रो लेआउट) को अलाइन करने के लिए Flexbox का।

Lesson image

उदाहरण के लिए, आप एक डैशबोर्ड का मेन लेआउट Grid से बना सकते हैं, लेकिन उस डैशबोर्ड के हर कार्ड के अंदर के टाइटल, टेक्स्ट और बटन को वर्टिकली अलाइन करने के लिए Flexbox का इस्तेमाल कर सकते हैं।

/* Macro Layout with Grid */
.dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Micro Layout with Flexbox */
.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Pushes button to the bottom */
}

आखिर में, बड़े ऐप्स में 'Box Model' की जटिलताओं को समझना ज़रूरी है। content-box (डिफ़ॉल्ट) और border-box के बीच का अंतर लेआउट को बना या बिगाड़ सकता है। border-box का इस्तेमाल लगभग हमेशा बेहतर होता है क्योंकि यह पैडिंग और बॉर्डर को एलिमेंट की कुल चौड़ाई और ऊंचाई में शामिल करता है, जिससे कैलकुलेशन आसान हो जाती है। बड़े प्रोजेक्ट्स में कंसिस्टेंसी के लिए, अक्सर CSS रीसेट में इसे ग्लोबली सेट कर दिया जाता है:

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

यह छोटा सा बदलाव आपको बड़े, नेस्टेड लेआउट्स में होने वाली कई साइज़िंग समस्याओं से बचाता है।

अब जब आप इन एडवांस्ड टेक्निक्स को समझ गए हैं, तो आइए कुछ सवालों से अपनी नॉलेज को टेस्ट करें।

Quiz Questions 1/5

Flexbox कंटेनर में, अगर आप सिर्फ एक आइटम को बाकी सब से अलग अलाइन करना चाहते हैं, तो आप कौन सी CSS प्रॉपर्टी का इस्तेमाल करेंगे?

Quiz Questions 2/5

CSS Grid में grid-template-areas प्रॉपर्टी का मुख्य लाभ क्या है?

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