सीएसएस लेआउट और रिस्पॉन्सिव डिज़ाइन

वेब सुविधाएं: Flexbox flex-wrap: balance ग्रिड सबग्रिड कंटेनर क्वेरी (साइज़) <dialog> पॉपओवर ऐंकर पोज़िशनिंग scrollbar-gutter line-clamp छोटे, बड़े, और डाइनैमिक व्यूपोर्ट की इकाइयां ग्रिड लेन aspect-ratio लॉजिकल प्रॉपर्टी
  1. 1 बुनियादी बातें
    1. कौनसा लेआउट मोड इस्तेमाल करना चाहिए?
    2. काम करने के सिद्धांत
  2. 2 फ़्लेक्सबॉक्स
  3. 3 ग्रिड और सबग्रिड
    1. कोड का उदाहरण: ग्रिड और सबग्रिड
  4. 4 कंटेनर क्वेरी
    1. कोड का उदाहरण: कंटेनर क्वेरी यूनिट का इस्तेमाल करके फ़्लूइड टाइपोग्राफ़ी
  5. 5 नेटिव ओवरले, ऐंकर पोज़िशनिंग, और स्टैकिंग कॉन्टेक्स्ट
  6. 6 ओवरफ़्लो ट्रैकिंग और लेआउट स्टेबिलिटी
  7. 7 व्यूपोर्ट मैकेनिक्स और ट्रैक डिस्ट्रिब्यूशन
  8. 8 ग्रिड लेन (इसे मेसनरी भी कहा जाता है)

1 बुनियादी बातें

बेहतर परफ़ॉर्मेंस के लिए, जब भी संभव हो ब्राउज़र के लेआउट इंजन का इस्तेमाल करें. हार्डकोड किए गए डाइमेंशन या मुश्किल मीडिया-क्वेरी का इस्तेमाल करने से पहले, इंट्रिन्सिक साइज़िंग, लॉजिकल प्रॉपर्टी, और aspect-ratio का इस्तेमाल करें.

1.1 कौनसा लेआउट मोड इस्तेमाल करना चाहिए?

डिसीज़न ट्री को ऊपर से नीचे तक देखें और पहले मैच पर रुकें. ध्यान दें कि लेआउट को एक-दूसरे के अंदर नेस्ट किया जा सकता है. साथ ही, हर फ़ैसला उस कंटेनर के इस्तेमाल के उदाहरण पर आधारित होता है.

  1. क्या यह आइटम की एक सामान्य पंक्ति या कॉलम है? फ़्लेक्सबॉक्स का इस्तेमाल करें — यह 1D होता है और इसमें कॉन्टेंट को प्राथमिकता दी जाती है. साथ ही, कॉन्टेंट को एक ही ऐक्सिस पर डिस्ट्रिब्यूट किया जाता है.
  2. क्या नेस्ट किए गए एलिमेंट को अपने ग्रैंडपैरंट ग्रिड के ट्रैक के साथ अलाइन करना ज़रूरी है? सबग्रिड का इस्तेमाल करें — 2D, रिलेशनशिप-फ़र्स्ट, पैरंट ट्रैक को इनहेरिट करता है, ताकि ग्रैंडचाइल्ड, सिबलिंग के साथ अलाइन हो सकें.
  3. क्या यह पंक्तियों और कॉलम वाला कोई जटिल पेज या कॉम्पोनेंट स्ट्रक्चर है? ग्रिड का इस्तेमाल करें — यह 2D और लेआउट-फ़र्स्ट होता है. इसमें आपको स्केलेटन तय करना होता है और कॉन्टेंट उसे भरता है.
  4. क्या कॉन्टेंट में गद्य का लंबा फ़्लो है, जिसे संतुलित कॉलम में बांटा जाना चाहिए? मल्टी-कॉलम का इस्तेमाल करें — 1D फ़्लो, न्यूज़पेपर स्टाइल.
  5. क्या अलग-अलग ऊंचाई वाले आइटम को कसकर पैक करना ज़रूरी है? आज ही grid-auto-flow: dense के साथ grid का इस्तेमाल करें. नेटिव मेसनरी (इसे "ग्रिड लेन" भी कहा जाता है) का इस्तेमाल सिर्फ़ तब करें, जब यह आपके बेसलाइन टारगेट में शामिल हो (§8 देखें).
  6. क्या किसी एलिमेंट को पेज के ऊपर फ़्लोट करना चाहिए और ट्रिगर से जुड़ा रहना चाहिए, भले ही वह डीओएम की सीमाओं या स्टैकिंग कॉन्टेक्स्ट से बाहर हो? ऐंकर पोज़िशनिंग का इस्तेमाल करें — ट्रिगर पर anchor-name, ओवरले पर position-anchor (§5 देखें).

1.2 काम करने के सिद्धांत

  • लेआउट के डाइमेंशन और स्पेसिंग के लिए, लॉजिकल प्रॉपर्टी (inline-size, block-size, margin-inline, padding-block, inset-inline-start) का इस्तेमाल करें — पूरी जानकारी के लिए, सीएसएस: मॉडर्न आर्किटेक्चर देखें.
  • कॉन्टेंट-फ़र्स्ट बनाम लेआउट-फ़र्स्ट मेंटल मॉडल लागू करें: जब आइटम फ़्लो तय करते हैं, तब फ़्लेक्सबॉक्स का इस्तेमाल करें. वहीं, जब पहले स्केलेटन तय किया जाता है, तब ग्रिड का इस्तेमाल करें.
  • एक ही एलान में दोनों ऐक्सिस को अलाइन करने के लिए, place-* शॉर्टहैंड (place-content, place-items, place-self) का इस्तेमाल करें.
  • फ़िक्स किए गए width/height से पहले, इंट्रिन्सिक साइज़िंग (min-content, max-content, fit-content()) और फ़्लेक्सिबल ट्रैक (fr, minmax()) का इस्तेमाल करें. इससे कम मीडिया क्वेरी और ज़्यादा बेहतर लेआउट मिलते हैं.
  • लेआउट से जुड़ी समस्याओं को छिपाने के लिए, overflow: hidden का इस्तेमाल न करें. इसके बजाय, उन्हें सोर्स पर ही ठीक करें. उदाहरण के लिए, बदले गए कुछ एलिमेंट, जैसे कि <canvas>, <img>, <svg>, <video>, <iframe> डिफ़ॉल्ट रूप से display: inline का इस्तेमाल करते हैं. इससे कुछ लेआउट में गैप आ सकता है. overflow का इस्तेमाल करके गैप को क्लिप करने के बजाय, ब्लॉक डिसप्ले-आउटसाइड वैल्यू (जैसे, display: block, grid, flex वगैरह) लागू करके उसे हटाएं.
  • मीडिया के लिए जगह रिज़र्व करने और ऐसेट लोड होने से पहले लेआउट शिफ़्ट को रोकने के लिए, aspect-ratio का इस्तेमाल करें.
.sidebar       { inline-size: max-content; }    /* Size to longest unbreakable token. */
.main-content  { inline-size: fit-content; }    /* Grow to available space, no further. */
.media         { aspect-ratio: 16 / 9; inline-size: 100%; block-size: auto; }
body.centered  { display: grid; place-content: center; min-block-size: 100dvb; }

calc-size() और पाबंदी के हिसाब से मूल साइज़ तय करने के बारे में जानने के लिए, मूल साइज़ के हिसाब से कैलकुलेट करना लेख पढ़ें.

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

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

यह करें:

  • display: flex की मदद से कॉन्टेक्स्ट सेट करें और flex-direction (row डिफ़ॉल्ट) की मदद से मुख्य ऐक्सिस सेट करें.
  • जब भी ओवरफ़्लो होने की संभावना हो, तब flex-wrap: wrap का इस्तेमाल करें — overflow: auto/hidden के बिना nowrap, छोटे व्यूपोर्ट पर ओवरफ़्लो हो जाएगा.
  • छोटे आइटम (जैसे, टैग क्लाउड, फ़िल्टर पिल, बटन ग्रुप या नेविगेशन लिंक) की रैप की गई लाइनों पर, flex-wrap: wrap के बाद flex-wrap: balance लेयर करें. इससे आइटम को सभी लाइनों में बराबर बांटा जा सकता है और आखिरी लाइन में किसी आइटम को अकेला रहने से रोका जा सकता है. जिन ब्राउज़र में यह सुविधा काम नहीं करती वे wrap पर वापस चले जाते हैं.
  • flex-grow/flex-shrink/flex-basis को अलग-अलग सेट करने के बजाय, आइटम पर flex शॉर्टहैंड <grow> <shrink> <basis> (जैसे, flex: 1 1 250px) का इस्तेमाल करें.
  • आइटम के बीच स्पेस देने के लिए, चाइल्ड मार्जिन के बजाय gap (या row-gap/column-gap लॉन्गहैंड) का इस्तेमाल करें.
  • पोज़िशनल अलाइनमेंट के प्रीफ़िक्स के तौर पर safe (जैसे, align-items: safe center) का इस्तेमाल करें, ताकि कंटेनर के कॉन्टेंट से छोटा होने पर, फ़ोकस किया जा सकने वाला कॉन्टेंट क्लिप न हो.
  • margin-inline-start: auto (या margin-block-start: auto) का इस्तेमाल करके, किसी एक आइटम को मुख्य ऐक्सिस के सबसे आखिरी छोर पर पुश करें. यह स्टैंडर्ड एस्केप हैच है.
  • align-self का इस्तेमाल करके, हर आइटम के लिए क्रॉस-ऐक्सिस अलाइनमेंट को बदलें.
  • सभी आइटम को क्रॉस ऐक्सिस पर बीच में लाने के लिए, align-items का इस्तेमाल करें. किसी एक आइटम को दोनों ऐक्सिस पर बीच में लाने के लिए, margin: auto का इस्तेमाल करें. align-content का इस्तेमाल सिर्फ़ तब करें, जब कंटेनर रैप हो और पंक्तियों में ज़्यादा जगह हो.
  • ऐसे फ़्लेक्स आइटम पर min-inline-size: 0 (या min-width: 0) सेट करें जिनमें न टूटने वाला लंबा कॉन्टेंट (यूआरएल, कोड, लंबी स्ट्रिंग) शामिल हो — फ़्लेक्स आइटम, डिफ़ॉल्ट रूप से अपने कॉन्टेंट के साइज़ से छोटे नहीं होंगे. इससे ओवरफ़्लो होगा.

ये काम न करें:

  • फ़्लेक्स आइटम पर justify-self का इस्तेमाल न करें — यह सिर्फ़ ग्रिड, ब्लॉक, और ऐब्सलूट-पोज़िशन वाले लेआउट पर काम करता है. इसके बजाय, ऑटो मार्जिन का इस्तेमाल करें.
  • इंटरैक्टिव कॉन्टेंट का क्रम बदलने के लिए, order या flex-direction: *-reverse का इस्तेमाल न करें. ये सिर्फ़ विज़ुअल ऑर्डर को बदलते हैं. डीओएम ऑर्डर अब भी क्रम से फ़ोकस करता है. इसलिए, कीबोर्ड टैब फ़्लो, उपयोगकर्ता को दिखने वाले फ़्लो से मैच नहीं करेगा.
  • space-around (आखिर में आधा गैप) और space-evenly (पहले, बीच में, और बाद में बराबर गैप) के बीच भ्रमित न हों.
  • ऐक्सिस फ़्लिप को न भूलें: जब flex-direction: column, justify-content ब्लॉक ऐक्सिस पर अलाइन होता है और align-items इनलाइन ऐक्सिस पर अलाइन होता है — डिफ़ॉल्ट के उलट.
  • कंटेनर और उसके चाइल्ड एलिमेंट, दोनों का साइज़ एक-दूसरे को भरने के लिए सेट न करें. इससे अक्सर ओवरफ़्लो होता है और अनचाहे नतीजे मिलते हैं. एक साइड को तय साइज़ दें.
  • एक ही आइटम पर flex-basis और width/inline-size, दोनों को सेट न करें — फ़्लेक्स कॉन्टेक्स्ट में flex-basis को प्राथमिकता दी जाती है और width को अनदेखा कर दिया जाता है. फ़्लेक्स आइटम का साइज़ तय करने के लिए, flex-basis (या flex शॉर्टहैंड) को एकमात्र भरोसेमंद सोर्स के तौर पर इस्तेमाल करें.
.card-grid        { display: flex; flex-flow: row wrap; gap: 1rem; }
.card-item        { flex: 1 1 250px; }                  /* grow, shrink, basis */
.card-item-action { margin-inline-start: auto; }        /* Push to main-axis end. */
.toolbar          { display: flex; align-items: safe center; }
.tag-list         { display: flex; flex-wrap: wrap; flex-wrap: balance; gap: 0.5rem; }

3 ग्रिड और सबग्रिड

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

ग्रिड की सुविधाएं चुनना:

  • क्या आपको पता है कि आपको कितने कॉलम चाहिए?
    • हां — अश्लील कॉन्टेंट वाले ट्रैक इस्तेमाल करें (grid-template-columns: 200px 1fr, repeat(3, 1fr) वगैरह)
    • क्या अलग-अलग कॉलम के लिए अलग-अलग साइज़ की ज़रूरत है (साइडबार + मुख्य, सभी को कवर करने वाला हेडर)? → नाम वाले और आसानी से पढ़े जा सकने वाले क्षेत्रों के लिए, grid-template-areas का इस्तेमाल करें
    • क्या सभी कॉलम एक जैसे हैं या उन्हें लाइन नंबर के हिसाब से रखा गया है? → repeat(N, ...) या नाम वाली लाइनों का इस्तेमाल करें
    • No (रिस्पॉन्सिव, आइटम की संख्या के बारे में जानकारी नहीं है) — repeat(auto-fit, minmax(min, 1fr)) का इस्तेमाल करें
    • क्या आखिरी लाइन में मौजूद आइटम को बची हुई जगह भरने के लिए स्ट्रेच किया जाना चाहिए? → auto-fit
    • क्या आखिरी लाइन के खाली ट्रैक को अपना कम से कम साइज़ बनाए रखना चाहिए (कॉलम के घोस्ट स्लॉट को सुरक्षित रखना)? → auto-fill
  • क्या आपको किसी आइटम को किसी खास जगह पर रखना है?
    • हां — grid-column: <start> / <end> या grid-area: <name> का इस्तेमाल करें
    • नहीं (सिर्फ़ कई ट्रैक में फैला हुआ है, फ़्लो की पोज़िशन से कोई फ़र्क़ नहीं पड़ता) — grid-column: span <n> का इस्तेमाल करें
  • क्या चाइल्ड एलिमेंट को पैरंट ग्रिड के ट्रैक साइज़ (सिबलिंग के बीच रैग्ड-एज अलाइनमेंट) को इनहेरिट करना चाहिए?
    • हां — जिस ऐक्सिस पर असर पड़ा है उस पर सबग्रिड का इस्तेमाल करें
    • क्या हर सेल में चाइल्ड एलिमेंट की संख्या अलग-अलग हो सकती है? → सबग्रिड सिर्फ़ एक ऐक्सिस; दूसरे के लिए grid-auto-rows/grid-auto-columns का इस्तेमाल करें
    • क्या बच्चों की संख्या तय है? → दोनों ऐक्सिस पर सबग्रिड का इस्तेमाल करना ठीक है
    • नहीं — स्टैंडर्ड ग्रिड, सबग्रिड की ज़रूरत नहीं है

यह करें:

  • display: grid के साथ कॉन्टेक्स्ट सेट करें.
  • पेज-लेवल के जटिल लेआउट के लिए, grid-template-areas का इस्तेमाल करें — एरिया के नाम अपने-आप दस्तावेज़ में शामिल हो जाते हैं. साथ ही, डिक्लेरेशन को पंक्तियों और कॉलम में अलाइन किया जा सकता है, ताकि उसे एक नज़र में पढ़ा जा सके.
  • रिस्पॉन्सिव कार्ड ग्रिड के लिए repeat(auto-fit, minmax(200px, 1fr)) का इस्तेमाल करें. इससे, भरे हुए ट्रैक को खींचकर पंक्ति को भरा जा सकता है. इसके अलावा, खाली ट्रैक को उनके कम से कम साइज़ में बनाए रखने के लिए, auto-fill का इस्तेमाल करें.
  • ट्रैक को अनुपात के हिसाब से बांटने के लिए fr का इस्तेमाल करें. साथ ही, ज़रूरत के हिसाब से ट्रैक की संख्या तय करने के लिए minmax(min, max) का इस्तेमाल करें.
  • ट्रैक के हिसाब से साइज़ तय करने के लिए grid-column: span <n>, खास लाइनों पर रखने के लिए grid-column: <start> / <end> या नाम वाले इलाकों के लिए grid-area: <name> का इस्तेमाल करके, आइटम की पोज़िशन तय करें.
  • कार्ड की सूचियों में "रैग्ड एज" की समस्या को हल करने के लिए, सबग्रिड (grid-template-columns: subgrid या grid-template-rows: subgrid) का इस्तेमाल करें. इससे टाइटल, मेटाडेटा, और सीटीए जैसे इंटरनल एलिमेंट, सिबलिंग के साथ अलाइन हो जाते हैं.
  • सबग्रिड एलान को पिछले साफ़ तौर पर दिए गए grid-template-rows/-columns एलान के साथ जोड़ें. इससे पुराने ब्राउज़र के लिए, एक ही कैस्केड फ़ॉलबैक के तौर पर काम किया जा सकेगा.

ये काम न करें:

  • यह उम्मीद न करें कि auto-fit/auto-fill ट्रैक का साइज़, आइटम के कॉन्टेंट से तय होगा. यह repeat() साइज़ आर्ग्युमेंट से तय होता है.
  • इंटरैक्टिव कॉन्टेंट पर grid-auto-flow: dense का इस्तेमाल न करें. यह आइटम को बेहतर तरीके से पैक करता है, लेकिन उन्हें विज़ुअल तौर पर फिर से क्रम में लगाता है. इससे डीओएम-ऑर्डर कीबोर्ड टैब फ़्लो टूट जाता है.
  • जब चाइल्ड एलिमेंट की संख्या अलग-अलग हो, तो दोनों ऐक्सिस पर सबग्रिड लागू न करें. अतिरिक्त वैल्यू, आखिरी ट्रैक में दिखती हैं. इसके बजाय, इंप्लिसिट ऐक्सिस के लिए grid-auto-rows/grid-auto-columns का इस्तेमाल करें.
  • justify-items/align-items (आइटम के कॉन्टेंट को उसके ट्रैक में अलाइन करता है) और justify-content/align-content (ग्रिड ट्रैक को कंटेनर में अलाइन करता है) के बीच भ्रमित न हों. गलत वैल्यू का इस्तेमाल करने पर, कोई असर नहीं पड़ता.
  • कंटेनर पर तय inline-size के बिना repeat(auto-fit/auto-fill, ...) का इस्तेमाल न करें — display: inline-grid या बिना साइज़ वाले फ़्लेक्स आइटम के अंदर, कंटेनर की कोई चौड़ाई नहीं होती है. इस वजह से, ट्रैक की संख्या का अनुमान नहीं लगाया जा सकता.

3.1 कोड का उदाहरण: ग्रिड और सबग्रिड

पेज शेल: <main class="page-layout"> में <header>, <aside>, <div class="card"> चाइल्ड एलिमेंट वाला <section class="card-grid">, और <footer> शामिल है.

/* Align grid-template-areas in rows and columns for readability. */
.page-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "header  header  header"
    "sidebar main    main"
    "footer  footer  footer";
  gap: 1.5rem;
}

header  { grid-area: header; }
aside   { grid-area: sidebar; }
footer  { grid-area: footer; }

.card-grid {
  grid-area: main;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-template-rows: auto 1fr; /* title block, body block */
  gap: 1rem;
}

.card {
  grid-row: span 2;
  display: grid;
  /* Same-cascade fallback: ignored when subgrid is supported. */
  grid-template-rows: auto 1fr;
  grid-template-rows: subgrid;
}

4 कंटेनर क्वेरी

व्यूपोर्ट के बजाय, पैरंट कंटेनर के साइज़ (या कंप्यूट की गई स्टाइल) के बारे में क्वेरी करना. मेंटल मॉडल: कंटेनर क्वेरी = कॉम्पोनेंट कॉन्टेक्स्ट; मीडिया क्वेरी = ग्लोबल पेज लेआउट और उपयोगकर्ता की प्राथमिकताएं (prefers-color-scheme, prefers-reduced-motion).

यह करें:

  • रैपर के डिसेंडेंट को क्वेरी करने से पहले, रैपर पर container-type: inline-size (सिर्फ़ चौड़ाई वाली क्वेरी) या container-type: size (दोनों ऐक्सिस) के साथ कंटेनमेंट कॉन्टेक्स्ट सेट करें.
  • जब नेस्ट किए गए कॉन्टेक्स्ट आपस में टकरा सकते हों, तब कंटेनर को container-name (या container शॉर्टहैंड: container: card / inline-size) के साथ नाम दें.
  • फ़्लूइड टाइप और स्पेसिंग का हिसाब लगाते समय, कंटेनर क्वेरी यूनिट शामिल करें: cqi/cqb (लॉजिकल इनलाइन/ब्लॉक), cqw/cqh (फ़िज़िकल), cqmin/cqmax.
  • जब भी container-type: size का इस्तेमाल किया जाए, तब कंटेनर को एक तय block-size दें. इसके बिना, डिसेंडेंट एलिमेंट छोटा हो जाता है, क्योंकि साइज़ कंटेनमेंट की वजह से कंटेनर अपने कॉन्टेंट को अनदेखा कर देता है.

ये काम न करें:

  • block-size को container-type वैल्यू के तौर पर इस्तेमाल न करें — यह मान्य नहीं है. दोनों ऐक्सिस के लिए size का इस्तेमाल करें.
  • container-type का एलान करने के बाद, यह उम्मीद न करें कि चाइल्ड एलिमेंट के इंट्रिन्सिक साइज़ का असर कंटेनर पर पड़ेगा. कंटेनमेंट चालू होने पर, कंटेनर को इस तरह से कंप्यूट किया जाता है जैसे कि उसमें कोई चाइल्ड एलिमेंट न हो.
  • ज़रूरी शर्तें पूरी न करने वाले पैरेंट एलिमेंट के चाइल्ड एलिमेंट में, कंटेनर क्वेरी यूनिट पर भरोसा न करें. ऐसा इसलिए, क्योंकि वे छोटे व्यूपोर्ट (svw/svh) पर वापस आ जाते हैं.

4.1 कोड का उदाहरण: कंटेनर क्वेरी यूनिट का इस्तेमाल करके फ़्लूइड टाइपोग्राफ़ी

.card-wrapper {
  container: card / inline-size; /* shorthand for container-name / container-type */
}

@container card (inline-size > 400px) {
  .content {
    display: flex;
    gap: 2rem;
  }
}

.title {
  /* Fluid type bound to the container width, not the viewport. */
  font-size: clamp(1rem, 4cqi, 2rem);
}

कॉम्पोनेंट के हिसाब से रिस्पॉन्सिव स्टाइलिंग पैटर्न के लिए, साइज़ के हिसाब से स्टाइलिंग और फ़्लूइड स्केलिंग देखें.

5 नेटिव ओवरले, ऐंकर पोज़िशनिंग, और स्टैकिंग कॉन्टेक्स्ट

हर ओवरले प्रिमिटिव का इस्तेमाल कब करना चाहिए:

  • popover का इस्तेमाल, कुछ समय के लिए दिखने वाले नॉन-मोडल यूआई (फ़्लायआउट, टोस्ट, टूलटिप) के लिए करें. यह सबसे ऊपर वाली लेयर में मौजूद होता है. इसके लिए, z-index को मैनेज करने की ज़रूरत नहीं होती.
  • <dialog> के साथ .showModal() का इस्तेमाल, ऐसे मॉडल इंटरैक्शन के लिए करें जिनमें फ़ोकस ट्रैपिंग और इनर्ट बैकड्रॉप की ज़रूरत होती है.
  • एक ही एलिमेंट पर popover और .showModal() को एक साथ इस्तेमाल न करें. ये दोनों रनटाइम स्टेट, एक-दूसरे से अलग हैं.

ऐंकर की पोज़िशनिंग (ओवरले का स्पेशल लेआउट):

  • ट्रिगर के हिसाब से ओवरले की पोज़िशन और साइज़ तय करने के लिए, position-area (या इनसेट पर anchor()) और anchor-size() का इस्तेमाल करें.
  • position-try-fallbacks: flip-block (या flip-inline) का इस्तेमाल करें, ताकि ओवरले के व्यूपोर्ट से बाहर निकलने पर, ब्राउज़र उसे फिर से सही जगह पर रख सके.
  • position-area की एक ही वैल्यू में, फ़िज़िकल और लॉजिकल कीवर्ड को मिक्स न करें — कोई एक कोऑर्डिनेट सिस्टम चुनें.
  • @supports (anchor-name: --x) की मदद से सुविधा का पता लगाएं और ऐब्सलूट-पोज़िशन फ़ॉलबैक दें.

लागू करने की पूरी जानकारी, पॉलीफ़िल रणनीतियों, और popover वैल्यू के रेफ़रंस के लिए, डिक्लेरेटिव डायलॉग और पॉपओवर कंट्रोल और पोज़िशन अवेयर टूलटिप देखें. ड्रॉपडाउन, फ़्लायआउट, और टैब इंडिकेटर पर लागू की गई ऐंकर पोज़िशनिंग के लिए, व्यूपोर्ट के हिसाब से ड्रॉपडाउन और ऐंकर पोज़िशनिंग टैब अंडरलाइन देखें.

6 ओवरफ़्लो ट्रैकिंग और लेआउट स्टेबिलिटी

लेआउट शिफ़्ट, स्क्रोलबार, और क्लिपिंग को अनुमान के मुताबिक मैनेज करें.

यह करें:

  • overflow: auto का इस्तेमाल करें, ताकि स्क्रोलबार सिर्फ़ तब दिखें, जब कॉन्टेंट असल में ओवरफ़्लो हो.
  • स्क्रोल कंटेनर बनाए बिना कॉन्टेंट को क्लिप करने के लिए, overflow: clip का इस्तेमाल करें. साथ ही, स्पिलओवर के लिए overflow-clip-margin को चुनें.
  • स्क्रोलबार के लिए जगह रिज़र्व करने और कॉन्टेंट बढ़ने पर लेआउट शिफ़्ट होने से रोकने के लिए, scrollbar-gutter: stable का इस्तेमाल करें.
  • नेस्ट किए गए स्क्रोल रीजन (जैसे, साइडबार, मॉडल, और सूचियां) पर overscroll-behavior: contain (या none) का इस्तेमाल करें, ताकि स्क्रोल चेन पेज में न दिखें. इसके अलावा, इंटरमीडिएट स्क्रोल रैपर (जैसे, स्वाइप-टू-रिवील ट्रैक) पर overscroll-behavior: chain का इस्तेमाल करें. ऐसा तब करें, जब ज़्यादा स्क्रोल को पैरंट स्क्रोलर पर भेजा जाना चाहिए. हालांकि, इसके लिए लोकल रबर-बैंड बाउंस को ट्रिगर नहीं किया जाना चाहिए.

  • एक से ज़्यादा लाइनों को छोटा करने के लिए, -webkit-line-clamp + display: -webkit-box + -webkit-box-orient: vertical ट्रायड का इस्तेमाल करें. प्रीफ़िक्स के बावजूद, यह पैटर्न पूरी तरह से तय किया गया है और अब भी इस्तेमाल किया जा सकता है. इसके साथ, बिना प्रीफ़िक्स वाली line-clamp शॉर्टहैंड प्रॉपर्टी का एलान करें. जो ब्राउज़र अब तक इस प्रॉपर्टी के साथ काम नहीं करते वे इसे अनदेखा कर देते हैं. ये काम न करें:

  • जब auto से काम चल जाए, तो overflow: scroll का इस्तेमाल न करें — scroll से स्क्रोलबार तब भी दिखते हैं, जब स्क्रोल करने के लिए कुछ न हो.

  • अगर आपको सिर्फ़ क्लिप करना है, तो overflow: hidden का इस्तेमाल न करें — hidden एक स्क्रोल कंटेनर बनाता है जिसे प्रोग्राम के हिसाब से स्क्रोल किया जा सकता है.

.scrollable-list {
  max-block-size: 400px;
  overflow-y: auto;
  scrollbar-gutter: stable;       /* Reserve scrollbar space. */
  overscroll-behavior: contain;   /* No scroll chaining into the page. */
}

.snippet {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-clamp: 3;                  /* Ignored where unsupported. */
  overflow: clip;
}

overflow: clip और overflow-clip-margin के बारे में ज़्यादा जानने के लिए, ओवरफ़्लो क्लिपिंग कंट्रोल देखें. स्वाइप-टू-रिवील यूआई में overscroll-behavior: chain के साथ नेस्ट किए गए स्क्रोल हैंडऑफ़ के लिए, स्वाइप-टू-रिवील देखें. स्क्रोलबार के रंग, साइज़, और थीम के बारे में जानने के लिए, स्क्रोलबार के रंग या मोटाई को पसंद के मुताबिक बनाना, गहरे रंग वाला मोड, और स्क्रोलबार को ज़्यादा कंट्रास्ट वाली सेटिंग के मुताबिक बनाना देखें.

7 व्यूपोर्ट मैकेनिक्स और ट्रैक डिस्ट्रिब्यूशन

  • मोबाइल लेआउट कंटेनर के लिए dvh/dvw का इस्तेमाल करें. इन कंटेनर को ब्राउज़र के यूज़र इंटरफ़ेस (यूआई) में होने वाले बदलावों (यूआरएल बार का छोटा/बड़ा होना) के हिसाब से अडजस्ट होना चाहिए.
  • फ़ुल-विड्थ लेआउट के लिए 100vw का इस्तेमाल न करें — यह स्क्रोलबार की चौड़ाई को अनदेखा करता है और हॉरिज़ॉन्टल ओवरफ़्लो का कारण बनता है. इसके बजाय, 100%, 100dvw या 100svw का इस्तेमाल करें.

रिस्पॉन्सिव डिज़ाइन के एंट्री पॉइंट (डाइनैमिक व्यूपोर्ट यूनिट, मीडिया के लिए जगह रिज़र्व करना, फ़्लूइड टाइपोग्राफ़ी) के लिए, रिस्पॉन्सिव डिज़ाइन देखें.

8 ग्रिड लेन (मेसनरी भी कहा जाता है)

इस स्पेसिफ़िकेशन को "ग्रिड लेन" (जैसे, display: grid-lanes) के नाम से डेवलप किया जा रहा है. हालांकि, पहले के एक्सपेरिमेंटल प्रोटोटाइप में grid-template-rows: masonry का इस्तेमाल किया गया था.

यह करें:

  • आज ही टाइट पैकिंग के लिए, grid-auto-flow: dense के साथ ग्रिड का इस्तेमाल करें. साथ ही, यह स्वीकार करें कि डीओएम ऑर्डर, विज़ुअल ऑर्डर से मेल नहीं खा सकता.
  • जब आइटम, एक जैसे कार्ड के बजाय दस्तावेज़ के फ़्रैगमेंट हों, तो कॉन्टेंट से भरे मेसनरी जैसे फ़्लो के लिए, मल्टी-कॉलम (columns: 3; column-gap: 1rem) का इस्तेमाल करें.
  • grid-template-rows: masonry को सिर्फ़ परतदार वृद्धि के तौर पर इस्तेमाल करें — @supports की मदद से सुविधा का पता लगाएं.

ये काम न करें:

  • जब तक बेसलाइन टारगेट पूरा नहीं हो जाता, तब तक grid-template-rows: masonry को ज़रूरी शर्त के तौर पर शिप न करें.
.gallery       { columns: 3 200px; column-gap: 1rem; }
.gallery > *   { break-inside: avoid; margin-block-end: 1rem; }

@supports (grid-template-rows: masonry) {
  .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-template-rows: masonry;
    gap: 1rem;
    columns: unset;
  }
}