मैक्रो लेआउट, आपके इंटरफ़ेस के बड़े और पेज की पूरी चौड़ाई वाले संगठन के बारे में बताते हैं.
किसी भी लेआउट को लागू करने से पहले, आपको यह पक्का करना चाहिए कि आपके कॉन्टेंट का फ़्लो सही हो. सिंगल कॉलम वाला यह डिफ़ॉल्ट ऑर्डर, छोटी स्क्रीन पर दिखेगा.
<body>
<header>…</header>
<main>
<article>…</article>
<aside>…</aside>
</main>
<footer>…</footer>
</body>
जब पेज-लेवल के इन अलग-अलग कॉम्पोनेंट को व्यवस्थित किया जाता है, तो मैक्रो लेआउट डिज़ाइन किया जाता है. यह आपके पेज का हाई-लेवल व्यू होता है. मीडिया क्वेरी का इस्तेमाल करके, सीएसएस में नियम दिए जा सकते हैं. इनमें बताया जाता है कि अलग-अलग स्क्रीन साइज़ के हिसाब से, यह व्यू कैसे अडजस्ट होना चाहिए.
ग्रिड
सीएसएस ग्रिड, आपके पेज पर लेआउट लागू करने के लिए एक बेहतरीन टूल है. पिछले उदाहरण में, मान लें कि स्क्रीन की चौड़ाई ज़रूरत के मुताबिक होने पर, आपको दो कॉलम वाला लेआउट चाहिए. ब्राउज़र की चौड़ाई ज़रूरत के मुताबिक होने पर, दो कॉलम वाला यह लेआउट लागू करने के लिए, मीडिया क्वेरी का इस्तेमाल करें. इससे, तय किए गए ब्रेकपॉइंट से ऊपर के ग्रिड स्टाइल को तय किया जा सकेगा.
@media (min-width: 45em) {
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
Flexbox
इस खास लेआउट के लिए, फ़्लेक्सबॉक्स का भी इस्तेमाल किया जा सकता है. स्टाइल कुछ इस तरह दिखेंगे:
@media (min-width: 45em) {
main {
display: flex;
flex-direction: row;
}
main article {
flex: 2;
}
main aside {
flex: 1;
}
}
हालांकि, फ़्लेक्सबॉक्स वर्शन के लिए ज़्यादा सीएसएस की ज़रूरत होती है. हर कॉलम के लिए एक अलग नियम होता है. इससे यह तय किया जाता है कि कॉलम को कितनी जगह लेनी चाहिए. ग्रिड के उदाहरण में, वही जानकारी कंटेनिंग एलिमेंट के लिए एक नियम में शामिल की जाती है.
क्या आपको मीडिया क्वेरी की ज़रूरत है?
ज़रूरी नहीं है कि आपको हमेशा मीडिया क्वेरी का इस्तेमाल करना पड़े. कुछ एलिमेंट में बदलाव करने पर, मीडिया क्वेरी ठीक से काम करती हैं. हालांकि, अगर लेआउट को बार-बार अपडेट करना पड़ता है, तो कई ब्रेकपॉइंट की वजह से आपकी मीडिया क्वेरी गड़बड़ा सकती हैं.
मान लें कि आपके पास कार्ड कॉम्पोनेंट से भरा कोई पेज है.
कार्ड की चौड़ाई कभी भी 15em से ज़्यादा नहीं होती. साथ ही, आपको एक लाइन में उतने कार्ड दिखाने हैं जितने फ़िट हो सकते हैं.
30em, 45em, और 60em जैसे ब्रेकपॉइंट के साथ मीडिया क्वेरी लिखी जा सकती हैं. हालांकि, यह काफ़ी मुश्किल और थकाऊ काम है.
इसके बजाय, नियम लागू किए जा सकते हैं, ताकि कार्ड अपने-आप सही मात्रा में जगह लें.
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
grid-gap: 1em;
}
फ़्लेक्सबॉक्स की मदद से भी ऐसा लेआउट बनाया जा सकता है. इस मामले में, अगर आखिरी लाइन में कार्ड की संख्या ज़रूरत के मुताबिक नहीं है, तो बाकी कार्ड कॉलम में लाइन अप होने के बजाय, उपलब्ध जगह में फ़िट होने के लिए स्ट्रेच हो जाएंगे. अगर आपको लाइनों और कॉलम को लाइन अप करना है, तो ग्रिड का इस्तेमाल करें.
.cards {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1em;
}
.cards .card {
flex-basis: 15em;
flex-grow: 1;
}
फ़्लेक्सबॉक्स या ग्रिड में कुछ स्मार्ट नियम लागू करके, डाइनैमिक मैक्रो लेआउट डिज़ाइन किए जा सकते हैं. इसके लिए, कम से कम सीएसएस और मीडिया क्वेरी की ज़रूरत होती है. इससे आपको कम काम करना पड़ता है. इसकी वजह यह है कि ब्राउज़र, कैलकुलेशन करता है. मीडिया क्वेरी के बिना फ़्लूड सीएसएस लेआउट के कुछ उदाहरण देखने के लिए, 1linelayouts.com पर जाएं.
देखें कि आपको कितना समझ आया
मैक्रो लेआउट के बारे में अपनी जानकारी को परखें.
इनमें से कौनसे वाक्य में मैक्रो लेआउट के बारे में सबसे सही जानकारी दी गई है?
क्या मैक्रो लेआउट, अलग-अलग स्क्रीन साइज़ के हिसाब से अडजस्ट होने के लिए हमेशा मीडिया क्वेरी का इस्तेमाल करते हैं?
अब आपको पेज-लेवल के मैक्रो लेआउट के बारे में कुछ आइडिया मिल गए हैं. अब पेज में मौजूद कॉम्पोनेंट पर ध्यान दें. यह माइक्रो लेआउट का दायरा है.