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

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

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

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

ग्रिड

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

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

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 में उपलब्ध डेवलपर टूल, आपके फ़्लेक्सबॉक्स कॉम्पोनेंट के आकार को विज़ुअलाइज़ करने में मदद कर सकते हैं.

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 से ज़्यादा हो.

चेतावनी: यह डेमो हर ब्राउज़र पर काम नहीं करेगा. Google Chrome में आपको chrome://flags पर #enable-container-queries फ़्लैग मिल सकता है.

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

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

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

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

सही

🎉

गलत

🎉 ग्रिड और फ़्लेक्सबॉक्स, दोनों ही लेआउट के मामले में बहुत काम के हैं.

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