मैक्रो लेआउट, आपके इंटरफ़ेस के बड़े और पेज-वाइड संगठन के बारे में बताते हैं.
कोई भी लेआउट लागू करने से पहले, आपको यह पक्का करना चाहिए कि आपकी सामग्री का फ़्लो सही है. छोटी स्क्रीन पर, एक कॉलम में डिफ़ॉल्ट क्रम में ही डेटा दिखेगा.
<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;
}
फ़्लेक्सबॉक्स या ग्रिड में कुछ स्मार्ट नियम लागू करके, कम से कम सीएसएस और बिना किसी मीडिया क्वेरी के डाइनैमिक मैक्रो लेआउट डिज़ाइन किए जा सकते हैं. इससे आपको कम काम करना पड़ता है—आपके बजाय ब्राउज़र कैलकुलेशन करता है. मीडिया क्वेरी के बिना फ़्लuid डिज़ाइन वाले आधुनिक सीएसएस लेआउट के कुछ उदाहरण देखने के लिए, 1linelayouts.com पर जाएं.
देखें कि आपको क्या समझ आया
मैक्रो लेआउट के बारे में अपनी जानकारी की जांच करें.
इनमें से कौनसा वाक्य, मैक्रो लेआउट के बारे में सबसे सही तरीके से बताता है?
क्या अलग-अलग स्क्रीन साइज़ के हिसाब से अडजस्ट करने के लिए, मैक्रो लेआउट हमेशा मीडिया क्वेरी का इस्तेमाल करते हैं?
अब आपके पास पेज-लेवल के मैक्रो लेआउट के लिए कुछ आइडिया हैं. अब अपना ध्यान पेज के कॉम्पोनेंट पर लगाएं. यह माइक्रो लेआउट का दायरा है.