लेआउट के बारे में सोचते समय, हम अक्सर पेज-लेवल के डिज़ाइन के बारे में सोचते हैं. हालांकि, पेज पर मौजूद छोटे कॉम्पोनेंट के अपने लेआउट हो सकते हैं.
आमतौर पर, कॉम्पोनेंट-लेवल के ये लेआउट, पेज पर अपनी जगह के हिसाब से अपने-आप अडजस्ट हो जाते हैं. ऐसा हो सकता है कि आपको यह न पता हो कि किसी कॉम्पोनेंट को मुख्य कॉन्टेंट कॉलम में रखा जाएगा या साइडबार में या दोनों में. यह जाने बिना कि कोई कॉम्पोनेंट कहां दिखेगा, आपको यह पक्का करना होगा कि कॉम्पोनेंट अपने कंटेनर के हिसाब से खुद को अडजस्ट कर सके.
ग्रिड
सीएसएस ग्रिड का इस्तेमाल सिर्फ़ पेज-लेवल के लेआउट के लिए नहीं किया जाता. यह उन कॉम्पोनेंट के लिए भी अच्छी तरह से काम करता है जो इनमें मौजूद होते हैं.
इस उदाहरण में, ::before और ::after
स्यूडो-एलिमेंट, हेडिंग के दोनों ओर सजावटी लाइनें बनाते हैं. हेडिंग खुद एक ग्रिड कंटेनर है. अलग-अलग एलिमेंट को इस तरह से व्यवस्थित किया जाता है कि लाइनें हमेशा उपलब्ध जगह को भरें.
h1 {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 1em;
}
h1::before,
h1::after {
content: "";
border-top: 0.1em double black;
align-self: center;
}
Chrome DevTools में, ग्रिड लेआउट की जांच करने का तरीका जानें.
Flexbox
नाम से ही पता चलता है कि फ़्लेक्सबॉक्स का इस्तेमाल करके, अपने कॉम्पोनेंट को फ़्लेक्सिबल बनाया जा सकता है. यह तय किया जा सकता है कि आपके कॉम्पोनेंट में मौजूद किन एलिमेंट का साइज़ कम से कम या ज़्यादा से ज़्यादा होना चाहिए. साथ ही, अन्य एलिमेंट को ज़रूरत के हिसाब से फ़िट होने दिया जा सकता है.
इस उदाहरण में, इमेज ने उपलब्ध जगह का एक चौथाई हिस्सा लिया है और टेक्स्ट ने तीन चौथाई हिस्सा लिया है. हालांकि, इमेज कभी भी 200 पिक्सल से बड़ी नहीं होती.
.media {
display: flex;
align-items: center;
gap: 1em;
}
.media-illustration {
flex: 1;
max-inline-size: 200px;
}
.media-content {
flex: 3;
}
Chrome DevTools में, फ़्लेक्सबॉक्स लेआउट की जांच करने का तरीका जानें.
कंटेनर क्वेरी
फ़्लेक्सबॉक्स की मदद से, कॉन्टेंट के हिसाब से डिज़ाइन किया जा सकता है. अपने एलिमेंट के पैरामीटर तय किए जा सकते हैं. जैसे, वे कितने छोटे या बड़े होने चाहिए. इसके बाद, ब्राउज़र को फ़ाइनल लेआउट तय करने दिया जा सकता है.
हालांकि, कॉम्पोनेंट को अपने कॉन्टेक्स्ट के बारे में कोई जानकारी नहीं होती. इसे यह नहीं पता होता कि इसका इस्तेमाल मुख्य कॉन्टेंट में किया जा रहा है या साइडबार में. इस वजह से, कॉम्पोनेंट लेआउट, पेज लेआउट से ज़्यादा मुश्किल हो सकते हैं. कॉम्पोनेंट को व्यूपोर्ट के साइज़ के अलावा, अन्य जानकारी भी जानने की ज़रूरत होगी, ताकि वे कॉन्टेक्स्ट के हिसाब से स्टाइल लागू कर सकें.
पेज लेआउट में, आपको कंटेनर की चौड़ाई के बारे में पता होता है, क्योंकि कंटेनर, ब्राउज़र व्यूपोर्ट होता है. मीडिया क्वेरी, पेज-लेवल के कंटेनर के डाइमेंशन की जानकारी देती हैं.
किसी कंटेनर के डाइमेंशन की जानकारी देने के लिए, कंटेनर क्वेरी का इस्तेमाल करें.
शुरू करने के लिए, यह तय करें कि कौनसे एलिमेंट कंटेनर के तौर पर काम करेंगे.
main,
aside {
container-type: inline-size;
}
इसका मतलब है कि आपको इनलाइन डाइमेंशन के लिए क्वेरी करनी है. अंग्रेज़ी भाषा के दस्तावेज़ों के लिए, यह हॉरिज़ॉन्टल ऐक्सिस होता है. कंटेनर की चौड़ाई के आधार पर, स्टाइल बदलनी हैं.
अगर कोई कॉम्पोनेंट इनमें से किसी कंटेनर में है, तो उस पर स्टाइल उसी तरह लागू की जा सकती हैं जिस तरह मीडिया क्वेरी लागू की जाती हैं.
.media-illustration {
max-width: 200px;
margin: auto;
}
@container (min-width: 25em) {
.media {
display: flex;
align-items: center;
gap: 1em;
}
.media-illustration {
flex: 1;
}
.media-content {
flex: 3;
}
}
अगर कोई मीडिया ऑब्जेक्ट ऐसे कंटेनर में है जो 25em से छोटा है, तो फ़्लेक्सबॉक्स स्टाइल लागू नहीं होती हैं. इमेज और टेक्स्ट को वर्टिकल क्रम में दिखाया जाता है.
हालांकि, अगर इमेज और टेक्स्ट को शामिल करने वाला एलिमेंट 25em से ज़्यादा चौड़ा है, तो इमेज और टेक्स्ट अगल-बगल दिखते हैं.
कंटेनर क्वेरी की मदद से, कॉम्पोनेंट को अलग-अलग स्टाइल किया जा सकता है. इसमें, कंटेनिंग एलिमेंट की चौड़ाई के आधार पर नियम लिखे जा सकते हैं. अब व्यूपोर्ट की चौड़ाई मायने नहीं रखती.
क्वेरी को एक साथ इस्तेमाल करना
पेज लेआउट के लिए मीडिया क्वेरी और पेज में मौजूद कॉम्पोनेंट के लिए कंटेनर क्वेरी का इस्तेमाल किया जा सकता है.
यहां पेज के पूरे स्ट्रक्चर में एक main एलिमेंट और एक aside एलिमेंट है.
दोनों एलिमेंट में मीडिया ऑब्जेक्ट मौजूद हैं.
<body>
<main>
<div class="media">…</div>
<div class="media">…</div>
</main>
<aside>
<div class="media">…</div>
</aside>
</body>
मीडिया क्वेरी, main और aside एलिमेंट पर ग्रिड लेआउट लागू करती है. ऐसा तब होता है, जब व्यूपोर्ट 45em से ज़्यादा चौड़ा हो.
@media (min-width: 45em) {
body {
display: grid;
grid-template-columns: 3fr 1fr;
}
}
मीडिया ऑब्जेक्ट के लिए कंटेनर क्वेरी का नियम पहले जैसा ही है:
हॉरिज़ॉन्टल फ़्लेक्सबॉक्स लेआउट सिर्फ़ तब लागू करें, जब कंटेनिंग एलिमेंट की चौड़ाई 25em से ज़्यादा हो.
कंटेनर क्वेरी, छोटे लेआउट के लिए गेम चेंजर हैं. आपके कॉम्पोनेंट, ब्राउज़र व्यूपोर्ट से अलग, खुद में शामिल हो सकते हैं.
देखें कि आपको कितना समझ आया
माइक्रो लेआउट के बारे में अपनी जानकारी की जांच करें.
क्या ग्रिड और फ़्लेक्सबॉक्स, दोनों का इस्तेमाल छोटे लेआउट के लिए किया जा सकता है?
पिछले वीडियो में, आपको पेज-लेवल के मैक्रो लेआउट के बारे में बताया गया था. अब आपको कॉम्पोनेंट-लेवल के माइक्रो लेआउट के बारे में पता चल गया है.
इसके बाद, आपको अपने कॉन्टेंट के बुनियादी हिस्सों के बारे में ज़्यादा जानकारी मिलेगी. साथ ही, आपको यह भी पता चलेगा कि इमेज को रिस्पॉन्सिव कैसे बनाया जाता है. सबसे पहले, आपको रिस्पॉन्सिव टाइपोग्राफ़ी के बारे में बताया जाएगा.