CSS Flexbox बनाम Grid: कब किस लेआउट का उपयोग करें

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

CSS Flexbox क्या है?

CSS Flexible Box Layout, जिसे आमतौर पर Flexbox कहा जाता है, एक एक-आयामी लेआउट मॉडल है। यह एकल अक्ष (क्षैतिज पंक्ति या ऊर्ध्वाधर स्तंभ) के साथ स्थान वितरित करने में उत्कृष्ट है। Flexbox कंटेनर के भीतर आइटम को लचीले ढंग से फैलने, बढ़ने, सिकुड़ने और उपलब्ध स्थान के आधार पर स्वयं को संरेखित करने में सक्षम बनाता है।

Flexbox को पारंपरिक CSS में कुख्यात रूप से कठिन सामान्य लेआउट समस्याओं को हल करने के लिए डिज़ाइन किया गया था: तत्वों को लंबवत केंद्रित करना, सहोदर तत्वों के बीच समान रूप से स्थान वितरित करना, और HTML बदले बिना सामग्री को पुनः क्रमित करना। Flexbox से पहले, डेवलपर्स इन प्रभावों को प्राप्त करने के लिए float, inline-block हैक और टेबल लेआउट पर निर्भर थे।

Flexbox मुख्य अवधारणाएँ

• Flex कंटेनर: वह पैरेंट तत्व जिस पर display: flex लागू किया गया है।
• Flex आइटम: Flex कंटेनर के प्रत्यक्ष चाइल्ड तत्व।
• मुख्य अक्ष: लेआउट की प्राथमिक दिशा (डिफ़ॉल्ट रूप से क्षैतिज, flex-direction द्वारा नियंत्रित)।
• क्रॉस अक्ष: मुख्य अक्ष के लंबवत दिशा।
• Flex Grow/Shrink/Basis: ऐसे गुण जो नियंत्रित करते हैं कि आइटम उपलब्ध स्थान भरने के लिए कैसे विस्तारित और सिकुड़ते हैं।

Flexbox उदाहरण: नेविगेशन बार

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 64px;
}

.navbar__logo {
  flex-shrink: 0;
}

.navbar__links {
  display: flex;
  gap: 16px;
  list-style: none;
}

यह नेविगेशन बार logo को बाईं ओर और लिंक को दाईं ओर धकेलने के लिए justify-content: space-between के साथ Flexbox का उपयोग करता है। आइटम align-items: center के माध्यम से लंबवत केंद्रित हैं। यह एक क्लासिक एक-आयामी लेआउट है जहाँ Flexbox प्राकृतिक विकल्प है।

CSS Grid क्या है?

CSS Grid लेआउट एक द्वि-आयामी लेआउट सिस्टम है। यह एक साथ पंक्तियों और स्तंभों को संभालता है, जिससे आप ग्रिड संरचना में तत्वों की स्थिति और आकार को सटीक रूप से नियंत्रित कर सकते हैं। Grid आपको स्पष्ट ट्रैक, क्षेत्र और प्लेसमेंट नियम परिभाषित करने देता है, न्यूनतम कोड के साथ जटिल लेआउट बनाता है।

Grid पृष्ठ-स्तरीय लेआउट और जटिल घटक संरचनाओं के लिए डिज़ाइन किया गया है जहाँ आपको दोनों आयामों को नियंत्रित करने की आवश्यकता होती है। यह नामित ग्रिड क्षेत्रों, auto-fill और auto-fit, और स्पष्ट पंक्ति/स्तंभ आकारों जैसी अवधारणाओं का परिचय देता है, जो पहले असंभव लेआउट को सीधा बनाता है।

Grid मुख्य अवधारणाएँ

• Grid कंटेनर: वह पैरेंट तत्व जिस पर display: grid लागू किया गया है।
• Grid आइटम: Grid कंटेनर के प्रत्यक्ष चाइल्ड तत्व।
• Grid ट्रैक: grid-template-rows और grid-template-columns द्वारा परिभाषित पंक्तियाँ और स्तंभ।
• Grid लाइन: अदृश्य रेखाएँ जो ट्रैक सीमाएँ बनाती हैं, प्लेसमेंट के लिए उपयोग की जाती हैं।
• Grid क्षेत्र: ग्रिड के नामित क्षेत्र जिनमें आइटम असाइन किए जा सकते हैं।
• Gap: ग्रिड ट्रैक (पंक्तियों और स्तंभों) के बीच का अंतराल।

Grid उदाहरण: पेज लेआउट

.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 64px 1fr 48px;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
  min-height: 100vh;
}

.page__header  { grid-area: header; }
.page__sidebar { grid-area: sidebar; }
.page__content { grid-area: content; }
.page__footer  { grid-area: footer; }

यह पृष्ठ लेआउट नामित ग्रिड क्षेत्रों का उपयोग करके क्लासिक साइडबार लेआउट बनाता है। हेडर और फ़ुटर दो स्तंभों में फैले हैं, जबकि साइडबार और सामग्री साथ-साथ रखे गए हैं। यह द्वि-आयामी संरचना वह है जहाँ Grid वास्तव में चमकता है।

Flexbox बनाम Grid: साथ-साथ तुलना

Flexbox का उपयोग कब करें

जब आपकी लेआउट समस्या मुख्यतः एक-आयामी हो, तो Flexbox सही विकल्प है। यहाँ सबसे सामान्य परिदृश्य हैं:

1. नेविगेशन बार और मेनू

नेविगेशन अनिवार्य रूप से आइटम की एक पंक्ति (या स्तंभ) है। Flexbox आइटम के बीच स्थान वितरित करता है, ओवरफ़्लो को सुंदरता से संभालता है, और आइटम को लंबवत संरेखित करना सरल बनाता है। gap गुण मेनू आइटम के बीच margin-आधारित अंतराल के पुराने तरीके को बदल देता है।

2. सामग्री को केंद्रित करना

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

यह तीन-पंक्ति केंद्रीकरण समाधान सबसे प्रिय Flexbox पैटर्न में से एक है। Flexbox से पहले, लंबवत केंद्रीकरण के लिए table-cell, absolute positioning के साथ transform, या line-height ट्रिक्स शामिल हैक की आवश्यकता होती थी। Flexbox इसे सहज बनाता है।

3. कार्ड सामग्री संरेखण

जब कार्ड में शीर्षक, विवरण और एक्शन बटन हों, और आप चाहते हैं कि सामग्री की लंबाई की परवाह किए बिना बटन हमेशा नीचे रहे, तो Flexbox इसे सुंदरता से संभालता है:

.card {
  display: flex;
  flex-direction: column;
}

.card__content {
  flex: 1;
}

सामग्री क्षेत्र पर flex: 1 इसे उपलब्ध स्थान भरने के लिए बढ़ने देता है, बटन को कार्ड के नीचे धकेलता है। यह काम करता है चाहे कार्ड में कितना भी टेक्स्ट हो।

4. फ़ॉर्म पंक्ति लेआउट

एक पंक्ति में व्यवस्थित और आकार बदलने योग्य फ़ॉर्म तत्व, जैसे खोज इनपुट और सबमिट बटन, Flexbox के लिए आदर्श हैं। इनपुट उपलब्ध स्थान भरने के लिए बढ़ सकता है जबकि बटन अपना प्राकृतिक आकार बनाए रखता है।

5. मीडिया ऑब्जेक्ट

क्लासिक मीडिया ऑब्जेक्ट पैटर्न (बाईं ओर छवि, दाईं ओर टेक्स्ट) Flexbox का प्राकृतिक मेल है। छवि अपनी प्राकृतिक चौड़ाई बनाए रखती है, जबकि टेक्स्ट शेष स्थान भरता है।

CSS Grid का उपयोग कब करें

जब आपके लेआउट को पंक्तियों और स्तंभों दोनों पर एक साथ नियंत्रण की आवश्यकता हो, या परिभाषित संरचना में आइटम के सटीक प्लेसमेंट की आवश्यकता हो, तो Grid सही विकल्प है।

1. पूर्ण-पृष्ठ लेआउट

हेडर, साइडबार, सामग्री क्षेत्र और फ़ुटर वाले पृष्ठ-स्तरीय लेआउट क्लासिक Grid उपयोग के मामले हैं। नामित ग्रिड क्षेत्र लेआउट को पढ़ने योग्य और रखरखाव योग्य बनाते हैं:

.layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "content"
    "sidebar"
    "footer";
}

@media (min-width: 768px) {
  .layout {
    grid-template-columns: 1fr 300px;
    grid-template-areas:
      "header  header"
      "content sidebar"
      "footer  footer";
  }
}

ध्यान दें कि रिस्पॉन्सिव ब्रेकपॉइंट कैसे सरलता से ग्रिड टेम्पलेट को पुनः परिभाषित करते हैं। आइटम अपने असाइन किए गए ग्रिड क्षेत्रों में बने रहते हैं, और लेआउट स्वचालित रूप से पुनर्गठित होता है। यह विभिन्न ब्रेकपॉइंट पर Flexbox कंटेनरों को पुनर्व्यवस्थित करने से कहीं अधिक साफ़ है।

2. कार्ड ग्रिड और गैलरी

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

यह एकल घोषणा एक रिस्पॉन्सिव कार्ड ग्रिड बनाती है जो उपलब्ध चौड़ाई के आधार पर स्तंभों की संख्या स्वचालित रूप से समायोजित करती है। प्रत्येक कार्ड कम से कम 280px चौड़ा है लेकिन शेष स्थान भरने के लिए बढ़ता है। किसी media query की आवश्यकता नहीं। minmax के साथ यह auto-fill पैटर्न सबसे शक्तिशाली Grid तकनीकों में से एक है।

3. डैशबोर्ड लेआउट

विभिन्न आकारों वाले विजेट का डैशबोर्ड, जो कई पंक्तियों और स्तंभों में फैला हो, Grid के लिए आदर्श है। आप आइटम को विशिष्ट ग्रिड स्थानों पर रख सकते हैं और ट्रैक में फैला सकते हैं:

.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 16px;
}

.widget--wide { grid-column: span 2; }
.widget--tall { grid-row: span 2; }
.widget--hero { grid-column: span 2; grid-row: span 2; }

4. पत्रिका और संपादकीय लेआउट

जब सामग्री को ओवरलैप करने या गैर-अनुक्रमिक स्थितियों में रखने की आवश्यकता हो, तो Grid एकमात्र CSS लेआउट सिस्टम है जो मूल रूप से इसका समर्थन करता है। आप आइटम को विशिष्ट ग्रिड लाइनों पर रख सकते हैं, बिना absolute positioning के ओवरलैपिंग रचनाएँ बना सकते हैं।

5. होली ग्रेल लेआउट

प्रसिद्ध 'होली ग्रेल' लेआउट (हेडर, निश्चित-चौड़ाई साइडबार और लचीले केंद्र के साथ तीन-स्तंभ मुख्य भाग, फ़ुटर) Grid के साथ सहजता से प्राप्त किया जा सकता है:

.holy-grail {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

Flexbox और Grid को संयोजित करना

सबसे प्रभावी दृष्टिकोण Flexbox और Grid के बीच चयन करना नहीं है, बल्कि उन्हें रणनीतिक रूप से संयोजित करना है। एक सामान्य और अनुशंसित पैटर्न मैक्रो लेआउट (पृष्ठ संरचना) के लिए Grid और माइक्रो लेआउट (घटकों के अंदर) के लिए Flexbox का उपयोग करना है।

उदाहरण: Grid और Flexbox के साथ डैशबोर्ड

/* Grid for the page structure */
.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 64px 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
  min-height: 100vh;
}

/* Flexbox for the header content */
.dashboard__header {
  grid-area: header;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
}

/* Flexbox for sidebar menu items */
.dashboard__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

इस उदाहरण में, Grid समग्र पृष्ठ संरचना को परिभाषित करता है, जबकि Flexbox प्रत्येक अनुभाग के भीतर संरेखण को संभालता है। चिंताओं का यह पृथक्करण आपके CSS को व्यवस्थित और उद्देश्यपूर्ण बनाए रखता है।

रिस्पॉन्सिव डिज़ाइन पैटर्न

Flexbox रिस्पॉन्सिव पैटर्न: रैपिंग

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  flex-shrink: 0;
}

Flexbox रैपिंग टैग सूचियों, चिप सेट और किसी भी आइटम संग्रह के लिए आदर्श है जो क्षैतिज स्थान समाप्त होने पर स्वाभाविक रूप से अगली पंक्ति में प्रवाहित होते हैं। प्रत्येक आइटम अपना प्राकृतिक आकार बनाए रखता है।

Grid रिस्पॉन्सिव पैटर्न: ऑटो-फिल

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

Grid auto-fill बिना किसी media query के वास्तव में रिस्पॉन्सिव ग्रिड बनाता है। कंटेनर की चौड़ाई के आधार पर स्तंभों की संख्या स्वचालित रूप से समायोजित होती है, प्रत्येक स्तंभ कम से कम 300px। यह Flexbox रैपिंग से अधिक शक्तिशाली है क्योंकि आइटम पंक्ति को समान रूप से भरने के लिए खिंचते हैं।

Grid रिस्पॉन्सिव पैटर्न: स्टैकिंग

.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .layout {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .layout {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

सामान्य गलतियाँ और उनसे कैसे बचें

• एकल-पंक्ति लेआउट के लिए Grid का उपयोग: यदि आपको केवल एक पंक्ति या स्तंभ में आइटम की आवश्यकता है, तो Flexbox सरल और अधिक उपयुक्त है। एकल grid-template-columns पंक्ति के साथ display: grid का उपयोग आमतौर पर ओवर-इंजीनियरिंग है।
• द्वि-आयामी लेआउट के लिए Flexbox का उपयोग: नेस्टेड flex कंटेनरों के साथ ग्रिड लेआउट बनाने का प्रयास नाज़ुक, रखरखाव में कठिन कोड की ओर ले जाता है। किसी भी लेआउट के लिए जहाँ पंक्तियों और स्तंभों दोनों पर नियंत्रण की आवश्यकता होती है, Grid का उपयोग करें।
• gap न भूलें: Flexbox और Grid दोनों gap गुण का समर्थन करते हैं। आइटम के बीच अंतराल सेट करने के लिए margin के बजाय इसका उपयोग करें। यह केवल आइटम के बीच लागू होता है, किनारों पर नहीं, जो आमतौर पर वही है जो आप चाहते हैं।
• flex-basis को width से ओवरराइड करना: flex कंटेनर में, flex-basis मुख्य अक्ष पर width पर प्राथमिकता लेता है। दोनों को एक साथ सेट करने से अप्रत्याशित व्यवहार हो सकता है। भ्रम से बचने के लिए flex शॉर्टहैंड का उपयोग करें।
• minmax न छोड़ें: ग्रिड स्तंभों को परिभाषित करते समय, स्तंभों को बहुत छोटा या बहुत बड़ा होने से रोकने के लिए हमेशा minmax() का उपयोग करने पर विचार करें। 1fr के रूप में परिभाषित स्तंभ शून्य तक सिकुड़ सकता है; minmax(200px, 1fr) न्यूनतम चौड़ाई सुनिश्चित करता है।
• इम्प्लिसिट ग्रिड को नज़रअंदाज़ न करें: जब आपके पास परिभाषित ग्रिड ट्रैक से अधिक आइटम हों, तो Grid इम्प्लिसिट ट्रैक बनाता है। इन इम्प्लिसिट ट्रैक के आकार को नियंत्रित करने के लिए grid-auto-rows और grid-auto-columns का उपयोग करें।

ब्राउज़र समर्थन

Flexbox और Grid दोनों को 2026 में उत्कृष्ट ब्राउज़र समर्थन प्राप्त है:

दोनों तकनीकें वर्षों से सभी प्रमुख ब्राउज़रों में पूरी तरह से समर्थित हैं। आधुनिक Web विकास में संगतता चिंताओं के कारण किसी से भी बचने का कोई कारण नहीं है। Flexbox में gap गुण सार्वभौमिक समर्थन प्राप्त करने वाली अंतिम प्रमुख विशेषता थी, जो 2021 से सभी ब्राउज़रों में उपलब्ध है।

त्वरित निर्णय गाइड

जब आप एक नया लेआउट शुरू करते हैं, तो स्वयं से ये प्रश्न पूछें:

• क्या मुझे पंक्तियों और स्तंभों दोनों को एक साथ नियंत्रित करने की आवश्यकता है? हाँ—Grid। नहीं—Flexbox।
• क्या सामग्री को लेआउट आकार निर्धारित करना चाहिए, या लेआउट को सामग्री की स्थिति निर्धारित करनी चाहिए? सामग्री-संचालित—Flexbox। लेआउट-संचालित—Grid।
• क्या आइटम को स्वाभाविक रूप से रैप करने की आवश्यकता है? हाँ—Flexbox के साथ flex-wrap या Grid के साथ auto-fill।
• क्या मुझे आइटम को ओवरलैप करने की आवश्यकता है? हाँ—Grid।
• क्या यह एक बड़े लेआउट के भीतर एक घटक है? घटक के लिए Flexbox, बड़े लेआउट के लिए Grid।