मैक्रो लेआउट आपके इंटरफ़ेस के बड़े और पूरे पेज के संगठन के बारे में बताते हैं.
किसी भी लेआउट को लागू करने से पहले, आपको यह पक्का कर लेना चाहिए कि आपकी सामग्री का प्रवाह सही है. सिर्फ़ एक कॉलम का डिफ़ॉल्ट क्रम, छोटी स्क्रीन के लिए लागू होगा.
<body>
<header>…</header>
<main>
<article>…</article>
<aside>…</aside>
</main>
<footer>…</footer>
</body>
इन अलग-अलग पेज-लेवल कॉम्पोनेंट को व्यवस्थित करके, आप एक मैक्रो लेआउट डिज़ाइन कर रहे हैं: आपके पेज का हाई-लेवल व्यू. मीडिया क्वेरी का इस्तेमाल करके, सीएसएस में ऐसे नियम दिए जा सकते हैं जो स्क्रीन के अलग-अलग साइज़ के हिसाब से इस व्यू में बदलाव करने के बारे में बताते हैं.
ग्रिड
CSS ग्रिड, आपके पेज पर लेआउट लागू करने के लिए एक बेहतरीन टूल है. ऊपर दिए गए उदाहरण में, मान लें कि पर्याप्त स्क्रीन चौड़ाई उपलब्ध होने पर आपको दो-कॉलम वाला लेआउट चाहिए. ब्राउज़र के काफ़ी चौड़ा हो जाने पर, इस दो-कॉलम वाले लेआउट को लागू करने के लिए, किसी तय ब्रेकपॉइंट के ऊपर ग्रिड स्टाइल को परिभाषित करने के लिए मीडिया क्वेरी का इस्तेमाल करें.
@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;
}
फ़्लेक्सबॉक्स या ग्रिड में कुछ स्मार्ट नियम लागू करके, कम से कम सीएसएस और बिना किसी मीडिया क्वेरी के डाइनैमिक मैक्रो लेआउट डिज़ाइन किए जा सकते हैं. यह आपके लिए कम काम है—आप इसके बजाय ब्राउज़र से गणनाएं कर रहे हैं. ऐसे मॉडर्न सीएसएस लेआउट के उदाहरण देखने के लिए जो बिना मीडिया क्वेरी के काम करते हैं, 1linelayout.comदेखें.
आपने जो सीखा है उसकी जांच करें
देखें कि मैक्रो लेआउट के बारे में आपको कितनी जानकारी है.
कौनसा वाक्य मैक्रो लेआउट के बारे में सबसे अच्छी तरह बताता है?
मैक्रो लेआउट हमेशा अलग-अलग स्क्रीन साइज़ के मुताबिक मीडिया क्वेरी का इस्तेमाल करते हैं?
अब जबकि आपके पास पेज-लेवल मैक्रो लेआउट बनाने के कुछ आइडिया हैं, तो अपना ध्यान पेज के कॉम्पोनेंट पर लगाएं. यह माइक्रो लेआउट की दुनिया है.