CSS ग्रिड

उदाहरणैः सह कोडस्निपेट् च सह CSS Grid इत्यत्र निर्मितं अस्माकं वैकल्पिकविन्यासप्रणालीं कथं सक्षमं, उपयोगं, अनुकूलितं च कर्तव्यं इति ज्ञातव्यम् ।

इस पृष्ठ पर

बूटस्ट्रैप् इत्यस्य पूर्वनिर्धारितजालप्रणाली एकदशकाधिकस्य CSS लेआउट् तकनीकानां पराकाष्ठां प्रतिनिधियति, यत् कोटिभिः जनाभिः प्रयतितं परीक्षितं च । परन्तु, नूतन CSS Grid इत्यादिषु ब्राउजर्-मध्ये वयं पश्यामः इति आधुनिक-CSS-विशेषतानां बहूनां तकनीकानां च विना अपि एतत् निर्मितम् आसीत् ।

Heads up—अस्माकं CSS Grid प्रणाली प्रयोगात्मका अस्ति तथा च v5.1.0 तः opt-in अस्ति! भवतः कृते प्रदर्शयितुं वयं अस्माकं दस्तावेजस्य CSS मध्ये तत् समाविष्टवन्तः, परन्तु पूर्वनिर्धारितरूपेण अक्षमम् अस्ति । भवतः परियोजनासु कथं सक्षमीकरणं कर्तव्यमिति ज्ञातुं पठन्तः भवन्तु।

कथं कार्यं करोति

Bootstrap 5 इत्यनेन सह, वयं पृथक् ग्रिड् प्रणालीं सक्षमीकरणस्य विकल्पं योजितवन्तः यत् CSS Grid इत्यत्र निर्मितम् अस्ति, परन्तु Bootstrap twist इत्यनेन सह । भवन्तः अद्यापि प्रतिक्रियाशीलविन्यासानां निर्माणार्थं सनकेन आवेदनं कर्तुं शक्नुवन्ति वर्गान् प्राप्नुवन्ति, परन्तु हुडस्य अधः भिन्नेन दृष्टिकोणेन सह।

CSS Grid इति ऑप्ट-इन अस्ति । सेट् कृत्वा पूर्वनिर्धारितजालप्रणालीं निष्क्रियं कुर्वन्तु तथा सेट् $enable-grid-classes: falseकृत्वा CSS ग्रिड् सक्षमं कुर्वन्तु $enable-cssgrid: true। ततः, भवतः सास् पुनः संकलयतु।
.rowwith इत्यस्य उदाहरणानि प्रतिस्थापयन्तु .grid. .gridवर्गः एकं सेट् करोति रचयति display: gridच grid-templateयत् भवान् स्वस्य HTML इत्यनेन सह निर्माति ।
.col-*वर्गाणां स्थाने वर्गैः प्रतिस्थापयन्तु .g-col-*। यतो हि अस्माकं CSS Grid स्तम्भाः इत्यस्य grid-columnस्थाने ग��णस्य उपयोगं कुर्वन्ति width।
स्तम्भाः, गटर आकाराः च CSS चरद्वारा सेट् भवन्ति । एतानि मातापित्रे सेट् कुर्वन्तु .gridतथा च यथा इच्छन्ति तथा अनुकूलितं कुर्वन्तु, इनलाइन अथवा शैलीपत्रिकायां, --bs-columnsतथा च --bs-gap।

भविष्ये Bootstrap सम्भवतः संकरसमाधानं प्रति स्थानान्तरं करिष्यति यतः gapगुणेन flexbox कृते प्रायः पूर्णं ब्राउजर् समर्थनं प्राप्तम् अस्ति ।

प्रमुख भेद

पूर्वनिर्धारितजालप्रणाल्याः तुलने : १.

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

उदाहरणानि

त्रयः स्तम्भाः

.g-col-4सर्वेषु viewports तथा उपकरणेषु त्रयः समानविस्तारयुक्ताः स्तम्भाः वर्गाणां उपयोगेन निर्मातुं शक्यन्ते । viewport आकारेण विन्यासं परिवर्तयितुं प्रतिक्रियाशीलवर्गान् योजयन्तु ।

.ग-कोल-४

<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>

प्रतिक्रियाशीलः

viewports मध्ये स्वस्य विन्यासं समायोजयितुं प्रतिक्रियाशीलवर्गाणां उपयोगं कुर्वन्तु । अत्र वयं संकीर्णतमेषु viewports इत्यत्र स्तम्भद्वयेन आरभामः, ततः medium viewports इत्यत्र ततः उपरि च त्रयः स्तम्भाः यावत् वर्धयामः ।

.ग-कोल-६ .ग-कोल-मद्-४

<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>

तस्य तुलना सर्वेषु viewports इत्यत्र अस्मिन् द्वयोः column layout इत्यनेन सह कुर्वन्तु ।

.ग-कोल-६

<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>

आरभते

Start classes इत्यस्य उद्देश्यं अस्माकं default grid इत्यस्य offset classes इत्यस्य स्थाने भवति, परन्तु ते पूर्णतया समानाः न सन्ति । CSS Grid शैल्याः माध्यमेन एकं जालसारूप्यं निर्माति यत् ब्राउजर्-भ्यः “start at this column” तथा “end at this column” इति वदन्ति । ते गुणाः सन्ति grid-column-startच grid-column-end. प्रारम्भवर्गाः पूर्वस्य आशुलिपिः भवन्ति। तान् स्तम्भवर्गैः सह युग्मं कृत्वा आकारं कृत्वा स्वस्तम्भानां यथा आवश्यकता अस्ति तथा संरेखयन्तु । Start classes begin at 1as 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 .grids इत्यस्य सुलभं नेस्टिंग् कर्तुं शक्नोति । परन्तु पूर्वनिर्धारितस्य विपरीतम् अयं जालः पङ्क्तिषु, स्तम्भेषु, अन्तरालेषु च परिवर्तनं उत्तराधिकारं प्राप्नोति । अधोलिखितं उदाहरणं विचार्यताम् - १.

वयं स्थानीय CSS चर इत्यनेन सह पूर्वनिर्धारितस्तम्भसङ्ख्यां अधिलिखयामः: --bs-columns: 3.
प्रथमे स्वस्तम्भे स्तम्भगणना उत्तराधिकारी भवति तथा च प्रत्येकं स्तम्भः उपलब्धविस्तारस्य तृतीयभागः भवति ।
द्वितीये स्वतः-स्तम्भे वयं नेस्टेड् इत्यत्र स्तम्भगणनां .grid12 (अस्माकं पूर्वनिर्धारितं) इति पुनः सेट् कृतवन्तः ।
तृतीये स्वतः-स्तम्भे नेस्टेड् सामग्री नास्ति ।

व्यवहारे एतेन अस्माकं पूर्वनिर्धारितजालप्रणाल्याः तुलने अधिकानि जटिलानि अनुकूलितविन्यासानि च अनुमन्यन्ते ।

प्रथमं स्वस्तम्भः

स्वस्तम्भः

द्वितीयः स्वस्तम्भः

६ of १२

४ of 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 चरैः सह स्तम्भानां संख्यां, पङ्क्तिसङ्ख्यां, अन्तरालस्य विस्तारं च अनुकूलितं कुर्वन्तु ।

चर इति	Fallback मूल्यम्	वर्णनम्‌
`--bs-rows`	`1`	भवतः जालसारूप्ये पङ्क्तयः संख्या
`--bs-columns`	`12`	भवतः जालसारूप्ये स्तम्भानां संख्या
`--bs-gap`	`1.5rem`	स्तम्भयोः मध्ये अन्तरस्य परिमाणं (ऊर्ध्वाधरं क्षैतिजं च) २.

एतेषां CSS चरानाम् पूर्वनिर्धारितं मूल्यं नास्ति; अपि तु, ते fallback मूल्यानि प्रयोजयन्ति ये यावत् स्थानीयदृष्टान्तः न प्रदत्तः भवति तावत् यावत् उपयुज्यन्ते । यथा, वयं var(--bs-rows, 1)अस्माकं CSS Grid rows कृते उपयुञ्ज्महे, यत् उपेक्षते --bs-rowsयतोहि तत् अद्यापि कुत्रापि न सेट् कृतम् अस्ति । एकदा भवति चेत्, .gridदृष्टान्तः तस्य fallback मूल्यस्य स्थाने तस्य मूल्यस्य उपयोगं करिष्यति 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>

तस्य कारणात् भवतः भिन्नाः ऊर्ध्वाधराः क्षैतिजाः च gaps भवितुम् अर्हन्ति, ये एकं मूल्यं (सर्वपक्षे) अथवा मूल्ययुग्मं (लम्बं क्षैतिजं च) ग्रहीतुं शक्नुवन्ति । gapइदं , इत्यस्य कृते inline style इत्यनेन सह , अथवा अस्माकं --bs-gapCSS variable इत्यनेन सह प्रयोक्तुं शक्यते ।

.ग-कोल-६

<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 Grid स्तम्भवर्गाणां च मिश्रणेन सह (उदा .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>