सीएसएस ग्रिड दा
उदाहरणें ते कोड स्निपेटें कन्नै CSS ग्रिड पर बने दे साढ़े वैकल्पिक लेआउट सिस्टम गी सक्षम, उपयोग ते अनुकूलित करने दा तरीका सिक्खो।
बूटस्ट्रैप दी डिफाल्ट ग्रिड सिस्टम इक दशक थमां मती 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
क्षैतिज गी बदलदी ऐ ते .padding
margin
-
इस चाल्लीं, एस दे बक्ख-बक्ख रूप
.row
च,.grid
एस च कोई नकारात्मक मार्जिन नेईं ऐ ते मार्जिन उपयोगिताएं दा इस्तेमाल ग्रिड गटरें गी बदलने लेई नेईं कीता जाई सकदा ऐ। ग्रिड गैप गी डिफ़ॉल्ट रूप कन्नै क्षैतिज ते लंबवत लागू कीता जंदा ऐ। होर मती जानकारी आस्तै ��नुकूलन खंड दिक्खो । -
इनलाइन ते कस्टम शैलियां गी संशोधक वर्गें आस्तै प्रतिस्थापन दे रूप च दिक्खेआ जाना चाहिदा (जियां,
style="--bs-columns: 3;"
बनामclass="row-cols-3"
) । -
नेस्टिंग बी इसी चाल्ली कम्म करदी ऐ , पर तुसेंगी इक नेस्टेड दे हर इक इंस्टेंस पर अपनी स्तंभ गिनती गी रीसेट करने दी लोड़ होग
.grid
. विस्तार लेई नेस्टिंग खंड दिक्खो ।
उदाहरण दे
त्रै स्तंभ
.g-col-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>
जवाबदेही
व्यूपोर्टें च अपने लेआउट गी समायोजित करने आस्तै प्रतिक्रियाशील वर्गें दा इस्तेमाल करो. इत्थें अस संकीर्ण व्यूपोर्टें पर दो स्तंभें कन्नै शुरू करदे आं , ते फ्ही मध्यम व्यूपोर्टें पर ते उसदे शा मते स्तंभें तगर बधाने आं ।
<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>
उसदी तुलना सारे व्यूपोर्टें पर इस दो स्तंभ लेआउट कन्नै करो.
<div class="grid">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
लपेटना
ग्रिड आइटम अपने आप गै अगली लाइन तगर लपेटदे न जिसलै क्षैतिज रूप कन्नै होर जगह नेईं होंदी ऐ। ध्यान रक्खो जे gap
ग्रिड आइटमें दे बिच्च क्षैतिज ते ऊर्ध्वाधर अंतराल पर लागू होंदा ऐ।
<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
इनें गुणें आस्तै इक अमान्य मूल्य ऐ.
<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>
इस व्यवहार गी ग्रिड स्तंभ वर्गें कन्नै मिलाया जाई सकदा ऐ।
<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 (साढ़ा डिफ़ॉल्ट) पर रीसेट कीता ऐ। - त्रीए ऑटो-कॉलम च कोई नेस्टेड सामग्री नेईं ऐ।
व्यवहार च एह् साढ़े डिफाल्ट ग्रिड सिस्टम दी तुलना च होर जटिल ते कस्टम लेआउट दी अनुमति दिंदा ऐ।
<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>
स्तंभ ते अंतराल
स्तंभें दी गिनतरी ते अंतराल गी समायोजित करो।
<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>
<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
<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-gap
CSS चर कन्नै इक इनलाइन शैली कन्नै लागू कीता जाई सकदा ऐ .
<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
) दे मिश्रण कन्नै आकार देई सकदे ओ ।
<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>