सीएसएस ग्रिड

बूटस्ट्रॅपाची मुलभूत ग्रिड प्रणाली लाखांनी लोकांनी प्रयत्न केल्ल्या आनी चांचणी केल्ल्या CSS मांडावळ तंत्राच्या एका दशका परस चड काळाचें पराकाष्ठेचें प्रतिनिधित्व करता. पूण, नव्या CSS ग्रिडा सारकिल्या ब्राउझरांनी आमी पळयतात तीं जायतीं आधुनीक CSS वैशिश्ट्यां आनी तंत्रां नासतनाय तयार केल्ली.

कशें काम करता

Bootstrap 5 कडेन, आमी CSS Grid चेर तयार केल्ली वेगळी ग्रिड प्रणाली सक्षम करपाचो पर्याय जोडला, पूण Bootstrap twist कडेन. तुमकां अजूनय प्रतिसाद दिवपी मांडावळ तयार करपाक तुमी सनकीन अर्ज करपाक शकतात अशे वर्ग मेळटात, पूण हुडा खाला वेगळ्या पद्दतीन.

• CSS ग्रिड ऑप्ट-इन आसा. सेट करून मुलभूत ग्रिड प्रणाली अक्षम करात आनी सेटींग $enable-grid-classes: falseकरून CSS ग्रिड सक्षम करात $enable-cssgrid: true. मागीर, तुमचो सॅस परतून संकलित करचो.

• च्या प्रसंगांची सुवात .rowबदला .grid. .gridवर्ग एक सेट करता display: gridआनी तयार करता grid-templateजें तुमी तुमच्या HTML कडेन बांदतात.

• .col-*वर्गां बदला वर्गां बदलात .g-col-*. कारण आमचे CSS Grid grid-columnस्तंभ width.

• स्तंभ आनी गटर आकार CSS चड-उणें वरवीं सेट केल्ले आसतात. हे पालकाचेर सेट करात .gridआनी तुमकां जाय तशें पसंतीचे करात, इनलायन वा स्टायलशीटांत, --bs-columnsआनी कडेन --bs-gap.

फुडाराक, बूटस्ट्रॅप संकरीत उपायांत स्थलांतरीत जावपाची शक्यताय आसा कारण gapगुणधर्मान flexbox खातीर लागीं लागीं पुराय ब्राउझर समर्थन मेळयलां.

मुखेल फरक

मुलभूत ग्रिड प्रणालीकडेन तुळा केल्यार:

• फ्लेक्स उपयुक्तताय CSS ग्रिड स्तंभांचेर तसोच परिणाम करिनात.

• गॅप्स गटरांची सुवात घेता. गुणधर्म आमच्या मुलभूत ग्रिड प्रणालींतल्यान gapआडव्या बदलता आनी चड करून .paddingmargin

• अशे तरेन s परस वेगळे तरेन .rows .gridकडेन नकारात्मक मार्जिन नासता आनी मार्जिन उपयुक्तताय वापरून ग्रिड गटर बदलूंक मेळना. जाळी अंतर पूर्वनिर्धारीतपणान आडवे आनी उबे लागू करतात. चड तपशीलां खातीर पसंतीचे विभाग पळयात .

• इनलायन आनी सानुकूल शैली संशोधक वर्गांखातीर बदलपी म्हणून पळोवंक जाय (देखीक, style="--bs-columns: 3;"vs 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>

ऑटो स्तंभ

जेन्ना ग्रिड आयटमांचेर वर्ग नात (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 ग्रिड .grids चें सोंपें नेस्टिंग करपाक परवानगी दिता. पूण, मुलभूत परस वेगळें, ही ग्रिड ओळी, स्तंभ आनी अंतरांत बदल वारसा दिता. सकयल दिल्लें उदाहरण पळयात:

• आमी थळाव्या CSS चडांत चड स्तंभांची मुलभूत संख्या ओव्हररायड करतात: --bs-columns: 3.
• पयल्या ऑटो-स्तंभांत, स्तंभ गणना वारसा मेळटा आनी दरेक स्तंभ उपलब्ध रुंदायेचो एक तृतीयांश आसता.
• दुसर् या ऑटो-स्तंभांत, आमी नेस्टेडाचेर स्तंभ गणना .grid12 (आमची मुलभूत) रीसेट केल्या.
• तिसऱ्या ऑटो-स्तंभांत नेस्टेड आशय ना.

वेव्हारांत आमच्या मुलभूत ग्रिड प्रणालीचे तुळेंत हाका लागून चड गुंतागुंतीची आनी सानुकूल मांडावळी मेळटा.

<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 चडांत चड स्तंभांची संख्या, ओळींची संख्या, आनी अंतरांची रुंदाय पसंतीची करात.

ह्या CSS चडांत चड मुलभूत मोल ना; ताचे बदला, ते फॉलबॅक मोलां लागू करतात जीं थळावी दृष्टांत पुरवण जाय मेरेन वापरतात. देखीक, आमी var(--bs-rows, 1)आमच्या CSS Grid ओळीं खातीर वापरतात, जें दुर्लक्ष करता --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>

ताका लागून, तुमकां वेगवेगळे उबे आनी आडवे gaps आसूं येतात, जे एकूच मोल (सगळ्यो बाजू) वा मोलाची जोडी (उबी आनी आडवी) घेवंक शकतात. हें , खातीर इनलायन शैलीन लागू करूं येता gap, वा आमच्या --bs-gapCSS व्हेरिएबलान.

<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. हाका लागून आमच्य��� संकलित CSS त निर्माण जाल्ल्या वर्गांची संख्या प्रभावीपणान पूर्वनिर्धारीत जाता. तुमकां हांगा दोन पर्याय आसात:

• त्या मुलभूत 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>