फ्लेक्सबॉक्स एक पंक्ति या एक स्तंभ के लिए अच्छा है। ग्रिड दो अक्ष एक साथ का औजार है: पंक्तियाँ और स्तंभ जो संरेखित हों, नियंत्रित तरीके से ओवरलैप हों, और बिना नेस्टेड रैपर के ढेर के फिर से बहें।

ज्यादातर ग्रिड बग धुँधले मॉडल से आते हैं: ट्रैक क्या है, fr बचे स्थान को कैसे बाँटता है, और स्तंभ सिकुड़ने पर auto-fit क्या करता है। यह पोस्ट वही मॉडल है, साथ वे पैटर्न जो मैं असली पेजों में चिपकाता हूँ।

ब्राउज़र समर्थन सालों से मजबूत है। ग्रिड को बेसलाइन सीएसएस मान सकते हैं, प्रोग्रेसिव-एन्हांसमेंट प्रयोग नहीं।

एक पैराग्राफ में मानसिक मॉडल

ग्रिड एक कंटेनर है जो ट्रैक तय करता है (स्तंभ चौड़ाई और पंक्ति ऊँचाई)। आइटम सेल में बैठते हैं। एक आइटम कई ट्रैक पर फैल सकता है। आप आइटम को लाइन नंबर, नामित लाइन, या नामित एरिया से रखते हैं। खाली स्थान fr से बँटता है। सीमित खाली स्थान minmax() से। बढ़ते-लपेटते रिस्पॉन्सिव स्तंभ repeat() में auto-fit या auto-fill से आते हैं।

अगर यह पैराग्राफ याद रहे, बाकी ग्रिड शब्दावली और कुछ तेज किनारे हैं।

ट्रैक, लाइन और सेल

जब आप लिखते हैं:

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
}

तो बनता है:

  • स्तंभ ट्रैक: तीन खड़ी पट्टियाँ, 200px, फिर बची चौड़ाई के दो बराबर हिस्से।
  • पंक्ति ट्रैक: हेडर-जैसी ऑटो ऊँचाई, लचीला मध्य, फुटर-जैसी ऑटो ऊँचाई।
  • लाइन: तीन स्तंभ पर चार खड़ी लाइनें (डिफ़ॉल्ट में 1 से 4 तक)। पंक्तियों के लिए वही विचार।
  • सेल: एक स्तंभ ट्रैक और एक पंक्ति ट्रैक का संगम।
  • गैप: ट्रैक के बीच गटर। गैप ट्रैक नहीं हैं। स्पैन मार्जिन जैसा गैप नहीं खाते।

बच्चे सोर्स क्रम में सेल भरते हैं, जब तक आप उन्हें न रखें। प्लेसमेंट वैकल्पिक है। साधारण कार्ड ग्रिड को कोई प्लेसमेंट नियम नहीं चाहिए।

लाइन प्लेसमेंट (जब जरूरत हो)

.hero {
  grid-column: 1 / 3; /* start line 1, end before line 3 */
  grid-row: 1 / 2;
}

.sidebar {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
}

grid-column: 1 / -1 मतलब पूरी चौड़ाई: पहली लाइन से आखिरी तक। ऋणात्मक सूचकांक अंत से गिनते हैं। अकेले यही कई "संकुचित पैरेंट के अंदर फुल ब्लीड" हैक हटा देता है।

नामित एरिया: ज्यादातर टीमों को यहीं से शुरू करना चाहिए

पेज शेल और डैशबोर्ड के लिए एरिया रिव्यू में लाइन नंबर से ज्यादा पढ़े जाते हैं:

.page {
  display: grid;
  min-height: 100dvh;
  grid-template-columns: 16rem 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "nav  header"
    "nav  main"
    "nav  footer";
}

.page__nav    { grid-area: nav; }
.page__header { grid-area: header; }
.page__main   { grid-area: main; }
.page__footer { grid-area: footer; }

<div class="page">
  <nav class="page__nav">...</nav>
  <header class="page__header">...</header>
  <main class="page__main">...</main>
  <footer class="page__footer">...</footer>
</div>

एरिया संभालने के नियम:

  • ऐस्की नक्शे की हर सेल भरी हो। सच में खाली छेद चाहिए तो . लगाएँ।
  • नामित क्षेत्र आयत होना चाहिए। एल-आकृति अमान्य है।
  • छोटी स्क्रीन पर एक मीडिया क्वेरी में पूरा नक्शा बदलें, आइटम-आइटम प्लेसमेंट से न लड़ें।
@media (max-width: 48rem) {
  .page {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      "header"
      "nav"
      "main"
      "footer";
  }
}

एक्सेसिबिलिटी के लिए सोर्स क्रम तार्किक रह सकता है। दृश्य क्रम एरिया नक्शे से बदलता है।

fr: बचा स्थान, "कंटेनर का अंश" नहीं

1fr का मतलब है स्थिर और मिन/मैक्स सामग्री आकार निकालने के बाद बचे स्थान का एक हिस्सा। यह हमेशा "१००% चौड़ाई का बराबर टुकड़ा" नहीं होता।

grid-template-columns: 200px 1fr 2fr;

अगर कंटेनर 1000px चौड़ा है और गैप शून्य:

१. स्तंभ एक के लिए 200px आरक्षित करें। २. बचा स्थान 800px है। ३. स्तंभ दो को बचे का 1/3 (~266px)। ४. स्तंभ तीन को बचे का 2/3 (~533px)।

सामग्री ट्रैक को उसके fr हिस्से से चौड़ा धकेल सकती है जब सामग्री का न्यूनतम आकार मुक्त-स्थान गणित से बड़ा हो। इसलिए कभी-कभी ओवरफ्लो "कहीं से" दिखता है। इलाज अक्सर स्पष्ट न्यूनतम है:

/* चौड़े बच्चे को ट्रैक फोड़ने से रोकें */
.grid > * {
  min-width: 0;
}

/* या ट्रैक खुद बाँधें */
grid-template-columns: 200px minmax(0, 1fr) minmax(0, 2fr);

minmax(0, 1fr) प्रोडक्शन आदत है: तरल स्तंभ जो सामग्री की आंतरिक चौड़ाई से नीचे सिकुड़ सकें (टेबल, लंबी यूआरएल, कोड ब्लॉक)।

minmax(): फर्श, छत और ईमानदार स्तंभ

minmax(min, max) ट्रैक की अनुमत आकार सीमा तय करता है। ग्रिड उस सीमा के अंदर प्रयुक्त आकार हल करता है।

आम पैटर्न:

/* साइडबार जो पढ़ने से नीचे न गिरे, पूरा पेज न खाए */
grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr);

/* पंक्तियाँ सामग्री के साथ बढ़ें, स्क्रॉल क्षेत्रों के लिए सीमा के साथ */
grid-template-rows: auto minmax(0, 1fr) auto;

/* पसंदीदा आकार वाले तरल कार्ड */
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));

minmax को डिज़ाइन इरादे ("लगभग 16rem चौड़े कार्ड") और हकीकत ("व्यूपोर्ट 340px" या "1600px") के बीच बातचीत की मेज समझें।

auto-fit बनाम auto-fill: रिस्पॉन्सिव स्तंभ का जाल

दोनों repeat() और लचीले ट्रैक आकार के साथ चलते हैं, अक्सर minmax(...):

.cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

महत्वपूर्ण फर्क:

कीवर्ड खाली ट्रैक
auto-fill खाली स्तंभ अंत में खाली जगह के रूप में रखता है
auto-fit खाली ट्रैक गिराता है ताकि बचे आइटम खिंचें

चौड़ी स्क्रीन पर कम आइटम पर:

  • auto-fill खाली स्तंभ छोड़ता है; आइटम लगभग 16rem (या अपना अधिकतम) रहते हैं, पीछे खाली स्लॉट।
  • auto-fit उन खाली को गिराता है, इसलिए आखिरी पंक्ति के आइटम पंक्ति भरने के लिए बढ़ते हैं।

ज्यादातर मार्केटिंग ग्रिड और कार्ड डैशबोर्ड को auto-fit चाहिए। auto-fill तब जब आरक्षित स्लॉट या खाली सेल पर भी स्तंभों की स्थिर लय चाहिए।

दोनों को स्तंभ गिनने के लिए निश्चित मुक्त स्थान चाहिए। पैरेंट की चौड़ाई आमतौर पर देती है। सिकुड़े पैरेंट में नेस्टेड ग्रिड चौंका सकते हैं। ग्रिड को चौड़ाई दें (width: 100%, minmax(0, 1fr) ट्रैक, आदि)।

अंतर्निहित ट्रैक और घना पैकिंग

अगर आइटम स्पष्ट टेम्पलेट के बाहर रखें, ग्रिड अंतर्निहित ट्रैक बनाता है। डिफ़ॉल्ट:

grid-auto-rows: auto;
grid-auto-columns: auto;
grid-auto-flow: row; /* or column, or dense variants */

grid-auto-flow: dense अलग स्पैन वाले आइटम पर छेद भरता है। मेसनरी-जैसे कार्ड दीवारों के लिए उपयोगी। एक्सेसिबिलिटी और कीबोर्ड क्रम के लिए अनुमान लगाना कठिन, इसलिए दृश्य गैलरी के लिए, फॉर्म के लिए नहीं।

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 8rem;
  grid-auto-flow: dense;
  gap: 0.5rem;
}

.gallery__wide { grid-column: span 2; }
.gallery__tall { grid-row: span 2; }

संरेखण: दो परतें जिन्हें लोग मिला देते हैं

ग्रिड कंटेनर के अंदर ट्रैक और अपने एरिया के अंदर आइटम दोनों संरेखित करता है:

.grid {
  justify-content: center; /* tracks as a group on the inline axis */
  align-content: start;    /* tracks as a group on the block axis */
  justify-items: stretch;  /* default: items fill cell width */
  align-items: stretch;    /* default: items fill cell height */
}

.item {
  justify-self: end;
  align-self: center;
}

डिफ़ॉल्ट आइटम खींचता है। इसलिए ग्रिड सेल में बटन पूरी चौड़ाई लगता है जब तक justify-items: start या आइटम पर justify-self: start न लगाएँ।

place-items, place-content और place-self दो-अक्ष शॉर्टहैंड हैं।

आम लेआउट जो भेज सकते हैं

१. रिस्पॉन्सिव कार्ड ग्रिड

.cards {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

min(100%, 18rem) 18rem से संकरे व्यूपोर्ट पर क्षैतिज ओवरफ्लो रोकता है।

२. होली ग्रेल / ऐप शेल

.shell {
  display: grid;
  min-height: 100dvh;
  grid-template-columns: clamp(12rem, 20vw, 18rem) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "side head"
    "side main"
    "side foot";
}

३. साफ स्तंभ में लेबल वाला फॉर्म

.form {
  display: grid;
  gap: 0.75rem 1rem;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
}

.form .full {
  grid-column: 1 / -1;
}

४. बिना फ्लेक्स जिम्नास्टिक के मीडिया ऑब्जेक्ट

.media {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

५. बारह-स्तंभ प्रोडक्ट ग्रिड (जब डिज़ाइन दे)

.product {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}

.product__hero   { grid-column: span 8; }
.product__aside  { grid-column: span 4; }
.product__full   { grid-column: 1 / -1; }

ब्रेकपॉइंट पर repeat(6, ...) या एक स्तंभ पर जाएँ और स्पैन रीसेट करें। शेल के लिए नामित एरिया अक्सर बारह स्तंभ से बेहतर; बारह स्तंभ तब मदद करते हैं जब डिज़ाइन सिस्टम "स्पैन ८ / स्पैन ४" बोले।

ग्रिड बनाम फ्लेक्स: साधारण निर्णय नियम

स्थिति चुनें
नियंत्रणों की एक-आयामी पंक्ति या स्तंभ फ्लेक्स
दो आयाम में संरेखित समान ऊँचाई कार्ड पंक्तियाँ ग्रिड
पेज क्षेत्र (नेव, मेन, असाइड) ग्रिड एरिया
अज्ञात गिनती वाली रैप चिप सूची फ्लेक्स रैप या ग्रिड auto-fit
व्यूपोर्ट में एक बॉक्स केंद्रित कोई भी; ग्रिड place-items: center छोटा है
दो-अक्ष पेज के अंदर एक-अक्ष टूलबार ग्रिड शेल + फ्लेक्स टूलबार

एक ही पेज पर दोनों इस्तेमाल होंगे। संरचना के लिए ग्रिड, सेल के अंदर माइक्रो-लेआउट के लिए फ्लेक्स।

डिबग चेकलिस्ट

जब लेआउट सिकुड़ने या संरेखित होने से "मना" करे:

१. आइटम ग्रिड आइटम है, या आपकी सोच से एक स्तर गहरा नेस्टेड है? २. बच्चे को min-width: 0 / min-height: 0 चाहिए? ३. डिफ़ॉल्ट stretch से लड़ रहे हैं? ४. 1fr मुक्त स्थान से बड़े आंतरिक न्यूनतम सामग्री आकार से टकराया? ५. पैरेंट चौड़ाई अनिश्चित है इसलिए auto-fit स्तंभ नहीं गिन पाता? ६. डेवटूल्स ग्रिड ओवरले खोलें। लाइन नंबर और एरिया नाम वहाँ दिखते हैं। अनुमान से ज्यादा ओवरले पर भरोसा करें।

क्या याद रखें

  • ट्रैक कंकाल तय करते हैं। आइटम सेल या स्पैन भरते हैं।
  • एरिया पेज क्रोम का पढ़ने योग्य नक्शा हैं।
  • fr स्थिर आकार और न्यूनतमों के बाद खाली स्थान बाँटता है।
  • minmax(0, 1fr) वह तरल स्तंभ है जो सच में सिकुड़ता है।
  • auto-fit खाली ट्रैक गिराता है; auto-fill रखता है।
  • दो अक्ष पर ग्रिड, एक पर फ्लेक्स। स्वतंत्र रूप से नेस्ट करें।

जब ये छह बिंदु मांसपेशी स्मृति बन जाएँ, ग्रिड विशेष सिंटैक्स नहीं लगता, बल्कि ऐसी तालिका बनाने जैसा लगता है जो फिर से बह सके।