सीएसएस ग्रिड दा

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

इस पेज पर

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

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

किवें कम्म करदा है

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

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

भविक्ख च, बूटस्ट्रैप संभावना ऐ जे हाइब्रिड समाधान च शिफ्ट होग की जे gapप्रॉपर्टी ने फ्लेक्सबॉक्स आस्तै लगभग पूरा ब्राउज़र समर्थन हासल कीता ऐ।

कुंजी भेद

डिफ़ॉल्ट ग्रिड सिस्टम दी तुलना च:

फ्लेक्स यूटिलिटीज सीएसएस ग्रिड स्तंभें गी उस्सै चाल्लीं प्रभावित नेईं करदियां न।
गैप्स गटरें दी जगह लैंदा ऐ। संपत्ति साढ़े डिफ़ॉल्ट ग्रिड सिस्टम थमां gapक्षैतिज गी बदलदी ऐ ते .paddingmargin
इस चाल्लीं, एस दे बक्ख-बक्ख रूप .rowच, .gridएस च कोई नकारात्मक मार्जिन नेईं ऐ ते मार्जिन उपयोगिताएं दा इस्तेमाल ग्रिड गटरें गी बदलने लेई नेईं कीता जाई सकदा ऐ। ग्रिड गैप गी डिफ़ॉल्ट रूप कन्नै क्षैतिज ते लंबवत लागू कीता जंदा ऐ। होर मती जानकारी आस्तै ��नुकूलन खंड दिक्खो ।
इनलाइन ते कस्टम शैलियां गी संशोधक वर्गें आस्तै प्रतिस्थापन दे रूप च दिक्खेआ जाना चाहिदा (जियां, 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-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>

घोंसला बनाना

साढ़े डिफ़ॉल्ट ग्रिड सिस्टम दे समान, साढ़ा सीएसएस ग्रिड .gridएस दी आसान नेस्टिंग दी अनुमति दिंदा ऐ। पर, डिफाल्ट दे बक्खरे तरीके कन्नै, एह् ग्रिड पंक्तियां, स्तंभें, ते अंतराल च बदलाव गी विरासत च लैंदा ऐ. हेठ दित्ती गेदी मिसाल उप्पर गौर करो:

अस इक लोकल 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>

अनुकूलित करना

स् थानीय सीएसएस चर कन्नै स्तंभें दी गिनतरी, पंक्तियें दी गिनतरी, ते अंतराल दी चौड़ाई गी अनुकूलित करो.

चर करने आला	फॉलबैक वैल्यू ऐ	ब्यौरा
`--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पर इस्तेमाल करदे आं , पर ते जरूरत मताबक संशोधित कीता जाई सकदा ऐ।.gridrow-gapcolumn-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>

उसदे कारण, तुंदे कोल बक्ख-बक्ख ऊर्ध्वाधर ते क्षैतिज gapएस हो सकदे न, जेह् ड़े इक गै मूल्य (सभनें पास्सें) जां मूल्यें दी इक जोड़ी (ऊर्ध्वाधर ते क्षैतिज) लेई सकदे न। 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 ग्रिड दी इक सीमा एह् ऐ जे साढ़ी डिफाल्ट वर्गें गी अजें बी दो 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>