सीएसएस ग्रिड के बा
उदाहरण आ कोड स्निपेट के साथ CSS ग्रिड पर बनल हमनी के वैकल्पिक लेआउट सिस्टम के सक्षम, उपयोग, आ अनुकूलित करे के तरीका सीखीं।
बूटस्ट्रैप के डिफ़ॉल्ट ग्रिड सिस्टम एक दशक से ढेर के सीएसएस लेआउट तकनीक सभ के पराकाष्ठा के प्रतिनिधित्व करे ला, लाखन लोग द्वारा आजमावल आ परीक्षण कइल गइल। लेकिन, एकरा के बिना कई गो आधुनिक सीएसएस फीचर आ तकनीक के भी बनावल गइल रहे जवन हमनी के नया सीएसएस ग्रिड जइसन ब्राउजर में देख रहल बानी जा।
कइसे काम करेला
बूटस्ट्रैप 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
क्षैतिज के बदल देला आ .padding
margin
-
अइसे, s के बिपरीत
.row
,.grid
s के कौनों नकारात्मक मार्जिन ना होला आ मार्जिन यूटिलिटी सभ के इस्तेमाल ग्रिड गटर सभ के बदले खातिर ना कइल जा सके ला। ग्रिड गैप डिफ़ॉल्ट रूप से क्षैतिज आ लंबवत लागू कइल जाला। अधिक जानकारी खातिर अनुकूलन खंड देखल जाय। -
इनलाइन आ कस्टम शैली सभ के संशोधक वर्ग सभ के प्रतिस्थापन के रूप में देखल जाय (जइसे कि,
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>
शुरू हो जाला
स्टार्ट क्लास के मकसद हमनी के डिफ़ॉल्ट ग्रिड के ऑफसेट क्लास के बदलल बा, लेकिन उ पूरा तरीका से एकही नईखे। सीएसएस ग्रिड अइसन स्टाइल सभ के माध्यम से ग्रिड टेम्पलेट बनावे ला जे ब्राउजर सभ के बतावे ला कि "एह कॉलम से शुरू करीं" आ "एह कॉलम पर खतम करीं"। ऊ गुण बा 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>
ऑटो कॉलम के बा
जब ग्रिड आइटम सभ पर कौनों क्लास ना होखे (a के तत्काल संतान .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>
घोंसला बनावे के काम होला
हमनी के डिफ़ॉल्ट ग्रिड सिस्टम के समान, हमनी के CSS ग्रिड .grid
s के आसान नेस्टिंग के अनुमति देला। हालाँकि, डिफ़ॉल्ट के बिपरीत, ई ग्रिड पंक्ति, कॉलम आ गैप सभ में बदलाव के बिरासत में मिले ला। नीचे दिहल उदाहरण पर विचार करीं:
- हमनी के एगो स्थानीय 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>
अनुकूलित कइल जा रहल बा
स्थानीय 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>
स्तंभ आ अंतराल के बारे में बतावल गइल बा
कॉलम के संख्या आ अंतराल के समायोजित करीं।
<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
. gap
ध्यान दीं कि हमनी के s पर इस्तेमाल करेनी जा .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
s हो सके ला, जवन एकही मान (सब ओर) या मान के जोड़ी (ऊर्ध्वाधर आ क्षैतिज) ले सके ला। एकरा के खातिर इनलाइन स्टाइल के साथ लागू कइल जा सकेला 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>