सीएसएस ग्रिड के बा

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

एह पन्ना पर दिहल गइल बा

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

हेड अप—हमार CSS ग्रिड सिस्टम प्रयोगात्मक बा आ v5.1.0 के रूप में ऑप्ट-इन बा! हमनी के एकरा के रउरा खातिर देखावे खातिर अपना दस्तावेज के सीएसएस में शामिल कइले बानी जा, बाकिर ई डिफ़ॉल्ट रूप से अक्षम बा. अपना प्रोजेक्ट में एकरा के कइसे सक्षम कइल जाला, ई जाने खातिर पढ़त रहीं.

कइसे काम करेला

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

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

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

प्रमुख अंतर बा

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

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

उदाहरण खातिर दिहल गइल बा

तीन गो स्तंभ बा

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

.जी-कोल-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>

जवाबदेह बा

व्यूपोर्ट सभ में आपन लेआउट समायोजित करे खातिर रिस्पांसिव क्लास सभ के इस्तेमाल करीं। इहाँ हमनी के सबसे संकरी व्यूपोर्ट पर दू गो कॉलम से शुरुआत करेनी जा, आ ओकरा बाद मध्यम व्यूपोर्ट आ ओकरा से ऊपर के तीन कॉलम तक बढ़ेनी जा।

.जी-कोल-6 .जी-कोल-एमडी-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>

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

.जी-कोल-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ग्रिड आइटम सभ के बीच क्षैतिज आ ऊर्ध्वाधर अंतराल पर लागू होला।

.जी-कोल-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>

शुरू हो जाला

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

.जी-कोल-3 .जी-स्टार्ट-2 के बा

.जी-कोल-4 .जी-स्टार्ट-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>

ऑटो कॉलम के बा

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

1 के बा

एचटीएमएल के बा

<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>

ई व्यवहार ग्रिड कॉलम क्लास सभ के साथ मिलावल जा सके ला।

.जी-कोल-6 के बा

1 के बा

एचटीएमएल के बा

<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>

घोंसला बनावे के काम होला

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

हमनी के एगो स्थानीय CSS चर के साथ कॉलम के डिफ़ॉल्ट संख्या के ओवरराइड करेनी जा: --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)के अपना CSS ग्रिड पंक्ति सभ खातिर इस्तेमाल करेनी जा, जवन अनदेखी करे ला --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>

स्तंभ आ अंतराल के बारे में बतावल गइल बा

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

.जी-कोल-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>

.जी-कोल-6 के बा

.जी-कोल-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. gapध्यान दीं कि हमनी के s पर इस्तेमाल करेनी जा .grid, लेकिन row-gapआ column-gapजरूरत के हिसाब से संशोधित कइल जा सकेला।

.जी-कोल-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 चर के साथ।

.जी-कोल-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 गो कॉलम के बा

.जी-कोल-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>