सीएसएस ग्रिड

उदाहरण और कोड स्निपेट के साथ CSS ग्रिड पर निर्मित हमारे वैकल्पिक लेआउट सिस्टम को सक्षम, उपयोग और अनुकूलित करना सीखें।

इस पृष्ठ पर

बूटस्ट्रैप का डिफ़ॉल्ट ग्रिड सिस्टम एक दशक से अधिक की सीएसएस लेआउट तकनीकों की परिणति का प्रतिनिधित्व करता है, जिसे लाखों लोगों द्वारा आजमाया और परखा गया है। लेकिन, यह कई आधुनिक सीएसएस सुविधाओं और तकनीकों के बिना भी बनाया गया था जिन्हें हम नए सीएसएस ग्रिड जैसे ब्राउज़र में देख रहे हैं।

सावधान रहें—हमारी सीएसएस ग्रिड प्रणाली प्रयोगात्मक है और v5.1.0 के अनुसार ऑप्ट-इन है! हमने इसे आपके लिए प्रदर्शित करने के लिए अपने दस्तावेज़ के सीएसएस में शामिल किया है, लेकिन यह डिफ़ॉल्ट रूप से अक्षम है। अपनी परियोजनाओं में इसे सक्षम करने का तरीका जानने के लिए पढ़ते रहें।

यह काम किस प्रकार करता है

बूटस्ट्रैप 5 के साथ, हमने एक अलग ग्रिड सिस्टम को सक्षम करने का विकल्प जोड़ा है जो सीएसएस ग्रिड पर बनाया गया है, लेकिन बूटस्ट्रैप ट्विस्ट के साथ। आपको अभी भी कक्षाएं मिलती हैं जिन्हें आप उत्तरदायी लेआउट बनाने के लिए लागू कर सकते हैं, लेकिन हुड के तहत एक अलग दृष्टिकोण के साथ।

CSS ग्रिड ऑप्ट-इन है। $enable-grid-classes: falseसीएसएस ग्रिड को सेट करके और सेटिंग करके डिफ़ॉल्ट ग्रिड सिस्टम को अक्षम करें $enable-cssgrid: true। फिर, अपने Sass को पुन: संकलित करें।
के उदाहरणों को से .rowबदलें .grid। .gridवर्ग सेट करता display: gridहै और बनाता है grid-templateजिसे आप अपने एचटीएमएल के साथ बनाते हैं ।
.col-*कक्षाओं को कक्षाओं से बदलें .g-col-*। ऐसा इसलिए है क्योंकि हमारे सीएसएस ग्रिड कॉलम के grid-columnबजाय संपत्ति का उपयोग करते हैं width।
कॉलम और गटर का आकार CSS चरों के माध्यम से निर्धारित किया जाता है। इन्हें पैरेंट पर सेट करें .gridऔर अपनी इच्छानुसार इनलाइन या स्टाइलशीट में --bs-columnsऔर के साथ कस्टमाइज़ करें --bs-gap।

भविष्य में, बूटस्ट्रैप संभवतः एक हाइब्रिड समाधान में स्थानांतरित हो जाएगा क्योंकि gapसंपत्ति ने फ्लेक्सबॉक्स के लिए लगभग पूर्ण ब्राउज़र समर्थन प्राप्त कर लिया है।

मुख्य अंतर

डिफ़ॉल्ट ग्रिड सिस्टम की तुलना में:

फ्लेक्स उपयोगिताओं सीएसएस ग्रिड कॉलम को उसी तरह प्रभावित नहीं करती हैं।
अंतराल गटर की जगह लेता है। प्रॉपर्टी हमारे डिफ़ॉल्ट ग्रिड सिस्टम से gapहॉरिजॉन्टल को बदल देती paddingहै और margin.
जैसे, s के विपरीत .row, .grids का कोई नकारात्मक मार्जिन नहीं है और मार्जिन उपयोगिताओं का उपयोग ग्रिड गटर को बदलने के लिए नहीं किया जा सकता है। ग्रिड अंतराल डिफ़ॉल्ट रूप से क्षैतिज और लंबवत रूप से लागू होते हैं। अधिक विवरण के लिए अनुकूलन अनुभाग देखें ।
style="--bs-columns: 3;"इनलाइन और कस्टम शैलियों को संशोधक वर्गों (जैसे, बनाम class="row-cols-3") के प्रतिस्थापन के रूप में देखा जाना चाहिए ।
नेस्टिंग समान रूप से काम करता है, लेकिन आपको नेस्टेड के प्रत्येक इंस्टेंस पर अपने कॉलम की संख्या को रीसेट करने की आवश्यकता हो सकती है .grid। विवरण के लिए नेस्टिंग अनुभाग देखें ।

उदाहरण

तीन कॉलम

.g-col-4कक्षाओं का उपयोग करके सभी व्यूपोर्ट और उपकरणों में तीन समान-चौड़ाई वाले कॉलम बनाए जा सकते हैं। व्यूपोर्ट आकार के आधार पर लेआउट बदलने के लिए उत्तरदायी वर्ग जोड़ें ।

.g-col-4

एचटीएमएल

<div class="grid text-center">
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
</div>

उत्तरदायी

व्यूपोर्ट में अपना लेआउट समायोजित करने के लिए प्रतिक्रियाशील कक्षाओं का उपयोग करें। यहां हम सबसे छोटे व्यूपोर्ट पर दो कॉलम से शुरू करते हैं, और फिर मध्यम व्यूपोर्ट और उससे ऊपर के तीन कॉलम तक बढ़ते हैं।

.g-col-6 .g-col-md-4

एचटीएमएल

<div class="grid text-center">
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
</div>

इसकी तुलना सभी व्यूपोर्ट पर इस दो कॉलम लेआउट से करें।

.g-col-6

एचटीएमएल

<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

रैपिंग

क्षैतिज रूप से कोई और जगह न होने पर ग्रिड आइटम स्वचालित रूप से अगली पंक्ति में आ जाते हैं। ध्यान दें कि gapग्रिड वस्तुओं के बीच क्षैतिज और लंबवत अंतराल पर लागू होता है।

.g-col-6

एचटीएमएल

<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

प्रारंभ होगा

प्रारंभ कक्षाएं हमारे डिफ़ॉल्ट ग्रिड की ऑफसेट कक्षाओं को प्रतिस्थापित करने का लक्ष्य रखती हैं, लेकिन वे पूरी तरह से समान नहीं हैं। CSS ग्रिड शैलियों के माध्यम से एक ग्रिड टेम्पलेट बनाता है जो ब्राउज़र को "इस कॉलम से शुरू करें" और "इस कॉलम पर समाप्त होता है" बताता है। वे गुण हैं grid-column-startऔर grid-column-end. प्रारंभ कक्षाएं पूर्व के लिए आशुलिपि हैं। अपने कॉलम को आकार और संरेखित करने के लिए उन्हें कॉलम क्लास के साथ जोड़ दें, हालांकि आपको इसकी आवश्यकता है। प्रारंभ कक्षाएं इन गुणों के लिए एक अमान्य मान के 1रूप में प्रारंभ होती हैं।0

.g-col-3 .g-start-2

.g-col-4 .g-start-6

एचटीएमएल

<div class="grid text-center">
  <div class="g-col-3 g-start-2">.g-col-3 .g-start-2</div>
  <div class="g-col-4 g-start-6">.g-col-4 .g-start-6</div>
</div>

ऑटो कॉलम

जब ग्रिड आइटम पर कोई वर्ग नहीं होता है ( के तत्काल बच्चे .grid), तो प्रत्येक ग्रिड आइटम स्वचालित रूप से एक कॉलम के आकार का हो जाएगा।

एचटीएमएल

<div class="grid text-center">
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

यह व्यवहार ग्रिड कॉलम कक्षाओं के साथ मिश्रित किया जा सकता है।

.g-col-6

एचटीएमएल

<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

घोंसला करने की क्रिया

हमारे डिफ़ॉल्ट ग्रिड सिस्टम के समान, हमारा CSS ग्रिड .grids के आसान नेस्टिंग की अनुमति देता है। हालाँकि, डिफ़ॉल्ट के विपरीत, यह ग्रिड पंक्तियों, स्तंभों और अंतरालों में परिवर्तन को इनहेरिट करता है। नीचे दिए गए उदाहरण पर विचार करें:

हम स्थानीय सीएसएस चर के साथ कॉलम की डिफ़ॉल्ट संख्या को ओवरराइड करते हैं: --bs-columns: 3.
पहले ऑटो-कॉलम में, कॉलम की गिनती इनहेरिट की जाती है और प्रत्येक कॉलम उपलब्ध चौड़ाई का एक तिहाई होता है।
दूसरे ऑटो-कॉलम में, हमने नेस्टेड पर कॉलम काउंट .gridको 12 (हमारा डिफ़ॉल्ट) पर रीसेट कर दिया है।
तीसरे ऑटो-कॉलम में कोई नेस्टेड सामग्री नहीं है।

व्यवहार में यह हमारे डिफ़ॉल्ट ग्रिड सिस्टम की तुलना में अधिक जटिल और कस्टम लेआउट की अनुमति देता है।

पहला ऑटो-कॉलम

ऑटो-कॉलम

दूसरा ऑटो-कॉलम

12 का 6

12 का 4

12 का 2

तीसरा ऑटो-कॉलम

एचटीएमएल

<div class="grid text-center" style="--bs-columns: 3;">
  <div>
    First auto-column
    <div class="grid">
      <div>Auto-column</div>
      <div>Auto-column</div>
    </div>
  </div>
  <div>
    Second auto-column
    <div class="grid" style="--bs-columns: 12;">
      <div class="g-col-6">6 of 12</div>
      <div class="g-col-4">4 of 12</div>
      <div class="g-col-2">2 of 12</div>
    </div>
  </div>
  <div>Third auto-column</div>
</div>

अनुकूलित

स्तंभों की संख्या, पंक्तियों की संख्या और रिक्त स्थान की चौड़ाई को स्थानीय CSS चरों के साथ अनुकूलित करें।

चर	फ़ॉलबैक मान	विवरण
`--bs-rows`	`1`	आपके ग्रिड टेम्पलेट में पंक्तियों की संख्या
`--bs-columns`	`12`	आपके ग्रिड टेम्पलेट में स्तंभों की संख्या
`--bs-gap`	`1.5rem`	स्तंभों के बीच की खाई का आकार (ऊर्ध्वाधर और क्षैतिज)

इन CSS चरों का कोई डिफ़ॉल्ट मान नहीं है; इसके बजाय, वे फ़ॉलबैक मान लागू करते हैं जिनका उपयोग स्थानीय उदाहरण प्रदान किए जाने तक किया जाता है। उदाहरण के लिए, हम var(--bs-rows, 1)अपनी सीएसएस ग्रिड पंक्तियों के लिए उपयोग करते हैं, जो अनदेखा करता --bs-rowsहै क्योंकि इसे अभी तक कहीं भी सेट नहीं किया गया है। एक बार ऐसा हो जाने पर, .gridइंस्टेंस फॉलबैक मान के बजाय उस मान का उपयोग करेगा 1।

कोई ग्रिड कक्षाएं नहीं

तत्काल बच्चों के तत्व ग्रिड आइटम हैं, इसलिए उन्हें स्पष्ट रूप से कक्षा .gridजोड़ने के बिना आकार दिया जाएगा ।.g-col

ऑटो-कॉलम

एचटीएमएल

<div class="grid text-center" style="--bs-columns: 3;">
  <div>Auto-column</div>
  <div>Auto-column</div>
  <div>Auto-column</div>
</div>

कॉलम और अंतराल

स्तंभों की संख्या और अंतराल को समायोजित करें।

.g-col-2

एचटीएमएल

<div class="grid text-center" style="--bs-columns: 4; --bs-gap: 5rem;">
  <div class="g-col-2">.g-col-2</div>
  <div class="g-col-2">.g-col-2</div>
</div>

.g-col-6

.g-col-4

एचटीएमएल

<div class="grid text-center" style="--bs-columns: 10; --bs-gap: 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-4">.g-col-4</div>
</div>

पंक्तियाँ जोड़ना

अधिक पंक्तियाँ जोड़ना और स्तंभों का स्थान बदलना:

ऑटो-कॉलम

एचटीएमएल

<div class="grid text-center" style="--bs-rows: 3; --bs-columns: 3;">
  <div>Auto-column</div>
  <div class="g-start-2" style="grid-row: 2">Auto-column</div>
  <div class="g-start-3" style="grid-row: 3">Auto-column</div>
</div>

अंतराल

केवल वर्टिकल गैप को संशोधित करके बदलें row-gap। ध्यान दें कि हम s gapपर उपयोग करते हैं .grid, लेकिन row-gapऔर column-gapआवश्यकतानुसार संशोधित किया जा सकता है।

.g-col-6

एचटीएमएल

<div class="grid text-center" style="row-gap: 0;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

उसके कारण, आपके पास अलग-अलग लंबवत और क्षैतिज gaps हो सकते हैं, जो एक मान (सभी पक्षों) या मानों की एक जोड़ी (ऊर्ध्वाधर और क्षैतिज) ले सकते हैं। gapइसे , या हमारे --bs-gapCSS वेरिएबल के लिए इनलाइन शैली के साथ लागू किया जा सकता है ।

.g-col-6

एचटीएमएल

<div class="grid text-center" style="--bs-gap: .25rem 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

सास

CSS ग्रिड की एक सीमा यह है कि हमारे डिफ़ॉल्ट वर्ग अभी भी दो Sass चर द्वारा उत्पन्न होते हैं, $grid-columnsऔर $grid-gutter-width. यह प्रभावी रूप से हमारे संकलित सीएसएस में उत्पन्न कक्षाओं की संख्या को पूर्व निर्धारित करता है। यहां आपके पास दो विकल्प हैं:

उन डिफ़ॉल्ट Sass चरों को संशोधित करें और अपने CSS को पुन: संकलित करें।
प्रदान की गई कक्षाओं को बढ़ाने के लिए इनलाइन या कस्टम शैलियों का उपयोग करें।

उदाहरण के लिए, आप कॉलम की संख्या बढ़ा सकते हैं और गैप का आकार बदल सकते हैं, और फिर इनलाइन शैलियों और पूर्वनिर्धारित CSS ग्रिड कॉलम वर्गों (जैसे, .g-col-4) के मिश्रण के साथ अपने "कॉलम" को आकार दे सकते हैं।

14 कॉलम

.g-col-4

एचटीएमएल

<div class="grid text-center" style="--bs-columns: 18; --bs-gap: .5rem;">
  <div style="grid-column: span 14;">14 columns</div>
  <div class="g-col-4">.g-col-4</div>
</div>