CSS ग्रिड
उदाहरणैः सह कोडस्निपेट् च सह CSS Grid इत्यत्र निर्मितं अस्माकं वैकल्पिकविन्यासप्रणालीं कथं सक्षमं, उपयोगं, अनुकूलितं च कर्तव्यं इति ज्ञातव्यम् ।
बूटस्ट्रैप् इत्यस्य पूर्वनिर्धारितजालप्रणाली एकदशकाधिकस्य CSS लेआउट् तकनीकानां पराकाष्ठां प्रतिनिधियति, यत् कोटिभिः जनाभिः प्रयतितं परीक्षितं च । परन्तु, नूतन CSS Grid इत्यादिषु ब्राउजर्-मध्ये वयं पश्यामः इति आधुनिक-CSS-विशेषतानां बहूनां तकनीकानां च विना अपि एतत् निर्मितम् आसीत् ।
कथं कार्यं करोति
Bootstrap 5 इत्यनेन सह, वयं पृथक् ग्रिड् प्रणालीं सक्षमीकरणस्य विकल्पं योजितवन्तः यत् CSS Grid इत्यत्र निर्मितम् अस्ति, परन्तु Bootstrap twist इत्यनेन सह । भवन्तः अद्यापि प्रतिक्रियाशीलविन्यासानां निर्माणार्थं सनकेन आवेदनं कर्तुं शक्नुवन्ति वर्गान् प्राप्नुवन्ति, परन्तु हुडस्य अधः भिन्नेन दृष्टिकोणेन सह।
-
CSS Grid इति ऑप्ट-इन अस्ति । सेट् कृत्वा पूर्वनिर्धारितजालप्रणालीं निष्क्रियं कुर्वन्तु तथा सेट्
$enable-grid-classes: false
कृत्वा CSS ग्रिड् सक्षमं कुर्वन्तु$enable-cssgrid: true
। ततः, भवतः सास् पुनः संकलयतु। -
.row
with इत्यस्य उदाहरणानि प्रतिस्थापयन्तु.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
यथा .padding
margin
-
तथा च, s इत्यस्य विपरीतम्
.row
,.grid
s इत्यस्य ऋणात्मकाः मार्जिनाः नास्ति तथा च मार्जिन-उपयोगितानां उपयोगः जाल-गटर-परिवर्तनाय न कर्तुं शक्यते । जाल-अन्तरालानि पूर्वनिर्धारितरूपेण क्षैतिजरूपेण लम्बवत् च प्रयुक्तानि भवन्ति । अधिकविवरणार्थं अनुकूलनविभागं पश्यन्तु । -
इन्लाइन् तथा कस्टम् शैल्याः परिवर्तकवर्गाणां प्रतिस्थापनरूपेण द्रष्टव्याः (उदा.,
style="--bs-columns: 3;"
vsclass="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 1
as 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 .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 चरैः सह स्तम्भानां संख्यां, पङ्क्तिसङ्ख्यां, अन्तरालस्य विस्तारं च अनुकूलितं कुर्वन्तु ।
चर इति | 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>
तस्य कारणात् भवतः भिन्नाः ऊर्ध्वाधराः क्षैतिजाः च gap
s भवितुम् अर्हन्ति, ये एकं मूल्यं (सर्वपक्षे) अथवा मूल्ययुग्मं (लम्बं क्षैतिजं च) ग्रहीतुं शक्नुवन्ति । gap
इदं , इत्यस्य कृते inline style इत्यनेन सह , अथवा अस्माकं --bs-gap
CSS 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>