सीएसएस ग्रिड

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

इस पेज पर

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

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

कोना काज करैत अछि

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

सीएसएस ग्रिड ऑप्ट-इन अछि। सेट कए डिफ़ॉल्ट ग्रिड सिस्टम कए अक्षम करू आओर सेट $enable-grid-classes: falseकए CSS ग्रिड कए सक्षम करू $enable-cssgrid: true. तखन, अपन सास केँ पुनः संकलित करू।
के उदाहरण के .rowसाथ बदलें .grid| .gridक्लास एकटा सेट करैत अछि आ display: gridबनाबैत अछि grid-templateजकरा अहाँ अपन एचटीएमएलसँ बना लैत छी ।
.col-*क्लास के जगह क्लास लगाउ .g-col-*। grid-columnएकर कारण अछि जे हमर CSS Grid कॉलम 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">
  <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">
  <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">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

लपेटना

ग्रिड आइटम स्वचालित रूप सं अगिला लाइन पर लपेटैत अछि जखन क्षैतिज रूप सं बेसी जगह नहि रहैत अछि. ध्यान रहे कि gapग्रिड आइटम कें बीच क्षैतिज आ ऊर्ध्वाधर अंतराल पर लागू होयत छै.

.जी-कोल-6

<div class="grid">
  <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 शैली के माध्यम स॑ एक ग्रिड टेम्पलेट बनाबै छै जे ब्राउज़र क॑ कहै छै कि “इस कॉलम प॑ शुरू करलऽ जाय” आरू “इस कॉलम प॑ समाप्त करलऽ जाय” । ओ गुण अछि grid-column-startआ grid-column-end. स्टार्ट क्लास पूर्वक लेल आशुलिपि अछि। ओकरा कॉलम क्लास के साथ जोड़ी बनाउ आ अपन कॉलम के आकार के हिसाब सं संरेखित करू जेना अहाँ के जरूरत होयत. प्रारंभ कक्षाक कें शुरूआत अइ गुणक 1कें 0लेल एकटा अमान्य मान छै.

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

.जी-कोल-4 .जी-स्टार्ट-6

<div class="grid">
  <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">
  <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

१

<div class="grid">
  <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 के आसान नेस्टिंग के अनुमति दैत अछि | लेकिन, डिफ़ॉल्ट के विपरीत, ई ग्रिड पंक्ति, स्तंभ आरू अंतराल म॑ बदलाव विरासत म॑ प्राप्त करै छै. नीचा देल गेल उदाहरण पर विचार करू:

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

व्यवहार मे इ हमर डिफ़ॉल्ट ग्रिड सिस्टम कें तुलना मे बेसि जटिल आ कस्टम लेआउट कें अनुमति देयत छै.

प्रथम ऑटो-स्तंभ

ऑटो-स्तंभ

दोसर ऑटो-स्तंभ

12 के 6

12 के 4

12 के 2

तेसर ऑटो-स्तंभ

<div class="grid" 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" style="--bs-columns: 3;">
  <div>Auto-column</div>
  <div>Auto-column</div>
  <div>Auto-column</div>
</div>

स्तंभ एवं अंतराल

स्तंभक संख्या आ अंतराल समायोजित करू।

.जी-कोल-2

<div class="grid" 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" 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" 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आवश्यकतानुसार संशोधित किया जा सकता है |

.जी-कोल-6

<div class="grid" 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" 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 Grid क एक सीमा इ छै कक हमरय डिफ़ॉल्ट क्लास अखनी भी दू Sass चर द्ववारा उत्पन्न करल गेलय छै, $grid-columnsआरू $grid-gutter-width. इ प्रभावी रूप सं हमर संकलित सीएसएस मे जेनरेट कैल गेल वर्गक कें संख्या कें पूर्व निर्धारित करयत छै. अहां लग एतय दूटा विकल्प अछि:

ओहि डिफ़ॉल्ट Sass चर केँ संशोधित करू आओर अपन CSS केँ पुनः संकलित करू.
उपलब्ध करायल गेल वर्गक कें संवर्धित करय कें लेल इनलाइन या कस्टम शैली कें उपयोग करूं.

उदाहरण के लेल, आप कॉलम गिनती बढ़ा सकय छै आरू गैप आकार बदल सकय छै, आरू ओकरा बाद इनलाइन शैली आरू पूर्व परिभाषित CSS ग्रिड कॉलम वर्ग (जैसे, .g-col-4) के मिश्रण स॑ अपनऽ “स्तंभ” क॑ आकार द॑ सकै छियै ।

14 स्तंभ

.जी-कोल-4

<div class="grid" 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>