CSS ग्रिड

उदाहरणे आणि कोड स्निपेट्ससह CSS ग्रिडवर तयार केलेली आमची वैकल्पिक मांडणी प्रणाली कशी सक्षम करायची, वापरायची आणि सानुकूलित कशी करायची ते शिका.

या पृष्ठावर

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

सावधान—आमची CSS ग्रिड प्रणाली प्रायोगिक आहे आणि v5.1.0 नुसार निवड करा! तुमच्यासाठी ते प्रदर्शित करण्यासाठी आम्ही आमच्या दस्तऐवजाच्या CSS मध्ये ते समाविष्ट केले आहे, परंतु ते डीफॉल्टनुसार अक्षम केले आहे. आपल्या प्रकल्पांमध्ये ते कसे सक्षम करावे हे जाणून घेण्यासाठी वाचत रहा.

हे कसे कार्य करते

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

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

भविष्यात, बूटस्ट्रॅप बहुधा हायब्रिड सोल्यूशनमध्ये बदलेल कारण gapमालमत्तेने फ्लेक्सबॉक्ससाठी जवळजवळ पूर्ण ब्राउझर समर्थन प्राप्त केले आहे.

मुख्य फरक

डीफॉल्ट ग्रिड प्रणालीच्या तुलनेत:

फ्लेक्स युटिलिटिजचा CSS ग्रिड कॉलमवर त्याच प्रकारे परिणाम होत नाही.
गटरांची जागा गॅप्स घेते. गुणधर्म आमच्या डीफॉल्ट ग्रिड सिस्टममधून gapक्षैतिज बदलते आणि सारखे कार्य करते .paddingmargin
त्यामुळे, s च्या विपरीत .row, .grids मध्ये कोणतेही ऋण मार्जिन नसतात आणि ग्रिड गटर बदलण्यासाठी मार्जिन युटिलिटिज वापरता येत नाहीत. डीफॉल्टनुसार ग्रिड अंतर क्षैतिज आणि अनुलंब लागू केले जातात. अधिक तपशीलांसाठी सानुकूलित विभाग पहा.
इनलाइन आणि सानुकूल शैली सुधारक वर्गांसाठी बदली म्हणून पाहिल्या पाहिजेत (उदा., style="--bs-columns: 3;"वि class="row-cols-3").
नेस्टिंग सारखेच कार्य करते, परंतु नेस्टेडच्या प्रत्येक उदाहरणावर तुम्हाला तुमची स्तंभ संख्या रीसेट करण्याची आवश्यकता असू शकते .grid. तपशीलांसाठी घरटी विभाग पहा.

उदाहरणे

तीन स्तंभ

.g-col-4वर्गांचा वापर करून सर्व व्ह्यूपोर्ट आणि उपकरणांवर तीन समान-रुंदीचे स्तंभ तयार केले जाऊ शकतात . व्ह्यूपोर्ट आकारानुसार लेआउट बदलण्यासाठी प्रतिसाद देणारे वर्ग जोडा .

.g-col-4

html

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

प्रतिसाद देणारा

व्ह्यूपोर्टवर तुमचा लेआउट समायोजित करण्यासाठी प्रतिसाद देणारे वर्ग वापरा. येथे आपण सर्वात अरुंद व्ह्यूपोर्ट्सवर दोन कॉलम्सपासून सुरुवात करतो आणि नंतर मध्यम व्ह्यूपोर्ट आणि त्यावरील तीन कॉलम्सपर्यंत वाढतो.

.g-col-6 .g-col-md-4

html

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

सर्व व्ह्यूपोर्टवर या दोन स्तंभ लेआउटशी तुलना करा.

.g-col-6

html

<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

गुंडाळणे

क्षैतिजरित्या अधिक जागा नसताना ग्रिड आयटम आपोआप पुढील ओळीत गुंडाळले जातात. लक्षात घ्या की gapग्रिड आयटममधील क्षैतिज आणि उभ्या अंतरांवर लागू होते.

.g-col-6

html

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

.g-col-3 .g-start-2

.g-col-4 .g-start-6

html

<div class="grid text-center">
  <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प्रत्येक ग्रिड आयटमचा आकार आपोआप एका स्तंभात केला जाईल.

१

html

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

हे वर्तन ग्रिड स्तंभ वर्गांमध्ये मिसळले जाऊ शकते.

.g-col-6

१

html

<div class="grid text-center">
  <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 (आमचे डीफॉल्ट) वर रीसेट केले आहे.
तिसऱ्या स्वयं-स्तंभामध्ये कोणतीही नेस्टेड सामग्री नाही.

व्यवहारात हे आमच्या डीफॉल्ट ग्रिड सिस्टीमच्या तुलनेत अधिक जटिल आणि सानुकूल मांडणीसाठी अनुमती देते.

प्रथम स्वयं-स्तंभ

स्वयं-स्तंभ

दुसरा स्वयं-स्तंभ

१२ पैकी ६

१२ पैकी ४

१२ पैकी २

तिसरा स्वयं-स्तंभ

html

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

स्वयं-स्तंभ

html

<div class="grid text-center" style="--bs-columns: 3;">
  <div>Auto-column</div>
  <div>Auto-column</div>
  <div>Auto-column</div>
</div>

स्तंभ आणि अंतर

स्तंभांची संख्या आणि अंतर समायोजित करा.

.g-col-2

html

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

.g-col-6

.g-col-4

html

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

पंक्ती जोडत आहे

अधिक पंक्ती जोडणे आणि स्तंभांचे स्थान बदलणे:

स्वयं-स्तंभ

html

<div class="grid text-center" 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आवश्यकतेनुसार सुधारित केले जाऊ शकते.

.g-col-6

html

<div class="grid text-center" 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 व्हेरिएबलसह लागू केले जाऊ शकते.

.g-col-6

html

<div class="grid text-center" 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. हे आमच्या संकलित CSS मध्ये व्युत्पन्न केलेल्या वर्गांची संख्या प्रभावीपणे पूर्वनिर्धारित करते. तुमच्याकडे येथे दोन पर्याय आहेत:

ते डीफॉल्ट Sass व्हेरिएबल्स सुधारित करा आणि तुमचे CSS पुन्हा कंपाइल करा.
प्रदान केलेले वर्ग वाढवण्यासाठी इनलाइन किंवा सानुकूल शैली वापरा.

उदाहरणार्थ, तुम्ही स्तंभ संख्या वाढवू शकता आणि अंतर आकार बदलू शकता आणि नंतर इनलाइन शैली आणि पूर्वनिर्धारित CSS ग्रिड स्तंभ वर्ग (उदा. .g-col-4) यांच्या मिश्रणाने तुमच्या “स्तंभांचा” आकार वाढवू शकता.

14 स्तंभ

.g-col-4

html

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