माइक्रो लेआउट

लेआउट की बात करते समय, हम अक्सर पेज-लेवल डिज़ाइन के बारे में सोचते हैं. हालांकि, पेज पर मौजूद छोटे कॉम्पोनेंट के लेआउट खुद ही पूरे हो सकते हैं.

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

दो कॉलम वाला लेआउट, एक चौड़ा और दूसरा छोटा. मीडिया ऑब्जेक्ट, चौड़े या पतले कॉलम में मौजूद हैं, इसके आधार पर उन्हें अलग-अलग लेआउट में रखा जाता है.

ग्रिड

सीएसएस ग्रिड, सिर्फ़ पेज-लेवल के लेआउट के लिए नहीं है. यह उनमें मौजूद कॉम्पोनेंट के लिए भी अच्छी तरह काम करता है.

इस उदाहरण में, ::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;
}
Firefox में डेवलपर टूल, ग्रिड ओवरले दिखा रहे हैं. Chrome में मौजूद डेवलपर टूल की इमेज, जिनमें एक ग्रिड ओवरले दिख रहा है.
Firefox और Chrome जैसे डेस्कटॉप ब्राउज़र में डेवलपर टूल उपलब्ध हैं, जो आपके डिज़ाइन के ऊपर ग्रिड लाइन और एरिया दिखा सकते हैं.

Chrome DevTools में ग्रिड लेआउट की जांच करने का तरीका जानें.

फ़्लेक्सबॉक्स

जैसा कि इसके नाम से पता चलता है, flexbox का इस्तेमाल करके, अपने कॉम्पोनेंट को लचीला बनाया जा सकता है. यह एलान किया जा सकता है कि आपके कॉम्पोनेंट के किन एलिमेंट का साइज़, कम से कम या ज़्यादा से ज़्यादा होना चाहिए. साथ ही, दूसरे एलिमेंट को ज़रूरत के हिसाब से फ़िट होने दें.

इस उदाहरण में, इमेज उपलब्ध जगह का एक चौथाई हिस्सा इस्तेमाल करती है और टेक्स्ट बाकी तीन चौथाई में. हालांकि, इमेज कभी भी 200 पिक्सल से ज़्यादा बड़ी नहीं होती.

.media {
  display: flex;
  align-items: center;
  gap: 1em;
}
.media-illustration {
  flex: 1;
  max-inline-size: 200px;
}
.media-content {
  flex: 3;
}
Firefox में डेवलपर टूल, जो फ़्लेक्सबॉक्स ओवरले दिखा रहे हैं. Chrome के डेवलपर टूल, जिनमें फ़्लेक्सबॉक्स ओवरले दिख रहा है.
Firefox और Chrome में उपलब्ध डेवलपर टूल, आपके फ़्लेक्सबॉक्स कॉम्पोनेंट के आकार को विज़ुअलाइज़ करने में मदद कर सकते हैं.

Chrome DevTools में फ़्लेक्सबॉक्स लेआउट की जांच करने का तरीका जानें.

कंटेनर से जुड़ी क्वेरी

Flexbox की मदद से, कॉन्टेंट से हटकर कुछ भी डिज़ाइन किया जा सकता है. आपके पास एलिमेंट के पैरामीटर तय करने का विकल्प होता है. जैसे, एलिमेंट की संख्या कितनी कम और कितनी चौड़ी होनी चाहिए. साथ ही, ब्राउज़र को यह तय करने दें कि उन्हें आखिर में लागू किया जाए या नहीं.

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

पेज लेआउट की मदद से, आपको कंटेनर की चौड़ाई के बारे में पता है, क्योंकि कंटेनर, ब्राउज़र का व्यूपोर्ट है. मीडिया क्वेरी, पेज लेवल कंटेनर के डाइमेंशन की रिपोर्ट करती हैं.

किसी भी कंटेनर के डाइमेंशन की रिपोर्ट करने के लिए, कंटेनर क्वेरी का इस्तेमाल करें.

शुरू करने के लिए, तय करें कि कौनसे एलिमेंट कंटेनर के तौर पर काम करते हैं.

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>

जब व्यूपोर्ट 45em से ज़्यादा चौड़ा होता है, तब मीडिया क्वेरी, main और aside एलिमेंट पर ग्रिड लेआउट लागू करती है.

@media (min-width: 45em) {
  body {
    display: grid;
    grid-template-columns: 3fr 1fr;
  }
}

मीडिया ऑब्जेक्ट के लिए कंटेनर क्वेरी नियम पहले जैसा ही रहता है: हॉरिज़ॉन्टल फ़्लेक्सबॉक्स लेआउट सिर्फ़ तब लागू करें, जब शामिल एलिमेंट की चौड़ाई 25em से ज़्यादा हो.

दो कॉलम वाला लेआउट, एक चौड़ा और दूसरा छोटा. मीडिया ऑब्जेक्ट, चौड़े या पतले कॉलम में मौजूद हैं, इसके आधार पर उन्हें अलग-अलग लेआउट में रखा जाता है.

कंटेनर क्वेरी, माइक्रो लेआउट के लिए बेहद ज़रूरी हैं. आपके कॉम्पोनेंट, ब्राउज़र के व्यूपोर्ट से अलग, और अपने-आप में पूरे हो सकते हैं.

जांचें कि आपको कितना समझ आया

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

क्या माइक्रो लेआउट के लिए ग्रिड और फ़्लेक्सबॉक्स दोनों काम के हैं?

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

पहले, आपको पेज-लेवल के मैक्रो लेआउट के बारे में पता था. अब आपको कॉम्पोनेंट-लेवल के माइक्रो लेआउट के बारे में पता है.

इसके बाद, आप अपनी सामग्री के ज़रूरी चीज़ों के बारे में गहराई से जानेंगे और जानेंगे कि अपनी इमेज को रिस्पॉन्सिव कैसे बनाया जा सकता है. सबसे पहले, आपको रिस्पॉन्सिव टाइपोग्राफ़ी के बारे में जानकारी मिलेगी.