मैक्रो लेआउट

मैक्रो लेआउट, आपके इंटरफ़ेस के बड़े और पेज पर व्यवस्थित तरीके के बारे में बताते हैं.

दो कॉलम वाले लेआउट का वायरफ़्रेम, जो छोटे व्यू के लिए एक कॉलम वाले लेआउट के बगल में है.

कोई भी लेआउट लागू करने से पहले, आपको यह पक्का करना चाहिए कि आपकी वेबसाइट का फ़्लो सही हो. एक कॉलम का डिफ़ॉल्ट क्रम, छोटी स्क्रीन पर दिखेगा.

<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 पर भी जाता है.

देखें कि आपको कितना समझ आया है

मैक्रो लेआउट के बारे में अपनी जानकारी को परखें.

कौनसा वाक्य मैक्रो लेआउट के बारे में सबसे अच्छी तरह बताता है?

ऐसे लेआउट जिनमें अन्य लेआउट होते हैं.
फिर से कोशिश करें! ज़्यादातर लेआउट में अन्य लेआउट होते हैं.
जब किसी डिज़ाइन में फ़्लेक्सबॉक्स या ग्रिड का इस्तेमाल किया जाता है.
फिर से कोशिश करें! मैक्रो लेआउट के लिए, फ़्लेक्सबॉक्स या ग्रिड में कुछ भी खास नहीं होता.
लो लेवल के लेआउट, जो स्क्रीन का कुछ हिस्सा कवर करते हैं.
फिर से कोशिश करें!
हाई लेवल लेआउट, जो काफ़ी ज़्यादा स्क्रीन को कवर करते हैं.
🎉 मैक्रो लेआउट, किसी पेज के लिए बुनियादी लेआउट होते हैं. इनमें कई विज़ुअल एरिया होते हैं. इन्हें अक्सर पेज साइज़ की मीडिया क्वेरी के हिसाब से अडजस्ट किया जाता है.

मैक्रो लेआउट, अलग-अलग स्क्रीन साइज़ के हिसाब से मीडिया क्वेरी का इस्तेमाल करते हैं?

सही
फिर से कोशिश करें! मैक्रो लेआउट को मीडिया क्वेरी के इस्तेमाल से तय नहीं किया जाता.
गलत
🎉 मैक्रो लेआउट, मीडिया क्वेरी के बिना कॉन्टेंट के हिसाब से फ़िट हो सकते हैं, उपलब्ध जगह को भर सकते हैं, और ऐसे कई दूसरे काम कर सकते हैं.

अब आपको पेज लेवल के मैक्रो लेआउट के लिए कुछ आइडिया मिल गए हैं, अपना ध्यान पेज में मौजूद कॉम्पोनेंट पर ले जाएं. यह दुनिया का सबसे माइक्रो लेआउट.