प्रौद्योगिकी साझेदारी

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

CSS Grid ग्रिड् लेआउट ट्युटोरियल

I. अवलोकनम्

ग्रिड् लेआउट् (Grid) इति सर्वाधिकं शक्तिशाली CSS लेआउट् समाधानम् अस्ति ।

एतत् जालपृष्ठानि जालपुटेषु विभजति, भिन्नानि जालपुटानि मनमानेन संयोजयित्वा विविधानि विन्यासानि निर्मातुं शक्यन्ते । पूर्वं जटिल-CSS-रूपरेखाद्वारा एव ये प्रभावाः प्राप्तुं शक्यन्ते स्म, ते अधुना ब्राउजर्-मध्ये निर्मिताः सन्ति ।

उपरि चित्रितवत् विन्यासः Grid विन्यासस्य विशेषता अस्ति ।

ग्रिड् लेआउट् इत्यस्य Flex लेआउट् इत्यनेन सह किञ्चित् समानता अस्ति, उभयत्र पात्रस्य अन्तः बहुविधवस्तूनाम् स्थानं निर्दिष्टुं शक्यते । तथापि महत्त्वपूर्णाः भेदाः सन्ति ।

Flex layout एकः अक्षविन्यासः अस्ति, तथा च केवलं अक्षस्य विरुद्धं "वस्तु" इत्यस्य स्थितिं निर्दिष्टुं शक्नोति, यत् यथा गणयितुं शक्यतेएकविमीयविन्यासः . जालविन्यासः पात्रं "पङ्क्तयः" "स्तम्भः" च इति विभजति, कोष्ठकाः जनयति, ततः कोष्ठकं निर्दिशति यत्र "वस्तु" अस्ति, यत् इति गणयितुं शक्यते2D विन्यास . ग्रिड् लेआउट् फ्लेक्स् लेआउट् इत्यस्मात् दूरतरं शक्तिशाली अस्ति ।

2. मूलभूतसंकल्पना

Grid layout ज्ञातुं पूर्वं भवद्भिः काश्चन मूलभूताः अवधारणाः अवगन्तुं आवश्यकाः सन्ति ।

२.१ पात्राणि परियोजनाश्च

जालविन्यासयुक्तः क्षेत्रः "पात्रः" इति कथ्यते । पात्रस्य अन्तः जालस्थापनस्य उपयोगं कुर्वन्ति ये बालतत्त्वानि "वस्तूनि" इति उच्यन्ते ।

<div>
  <div><p>1</p></div>
  <div><p>2</p></div>
  <div><p>3</p></div>
</div>
1
2
3
4
5

उपर्युक्ते संहितायां बाह्यतमः<div>तत्त्वं पात्रं, अन्तः त्रीणि च<div>तत्त्वानि द्रव्याणि सन्ति।

सूचना: परियोजना केवलं पात्रस्य शीर्षस्तरीयः बालतत्त्वः एव भवितुम् अर्हति, तथा च परियोजनायाः बालतत्त्वानि, यथा उपरिष्टाद् कोडः, न समाविष्टाः<p> तत्त्वानि द्रव्याणि न भवन्ति। ग्रिड् लेआउट् केवलं परियोजनासु एव प्रभावं प्राप्नोति ।

२.२ पङ्क्तयः स्तम्भाः च

पात्रस्य अन्तः क्षैतिजक्षेत्रं "पङ्क्तिः" इति उच्यते, लम्बक्षेत्रं च "स्तम्भ" इति उच्यते ।

उपरि चित्रे क्षैतिजं कृष्णक्षेत्राणि "पङ्क्तयः" लम्बवत् कृष्णक्षेत्राणि च "स्तम्भाः" सन्ति ।

२.३ कोष्ठकाः

पङ्क्तिस्तम्भयोः प्रतिच्छेदक्षेत्रं "कोष्ठकं" इति कथ्यते ।

सामान्यपरिस्थितौ २.nठीकम् चmस्तम्भाः उत्पादयिष्यन्तिn x m कोष्ठकाः । यथा, ३ पङ्क्तयः ३ स्तम्भाः च ९ कोष्ठकाः उत्पादयिष्यन्ति ।

२.४ जालरेखाः

ये रेखाः जालं विभजन्ति ते "जालरेखाः" इति उच्यन्ते । क्षैतिजजालरेखाः पङ्क्तयः विभजन्ति, लम्बजालरेखाः च स्तम्भान् विभजन्ति ।

सामान्यपरिस्थितौ २.nअस्तुn + 1मूल क्षैतिज जालरेखा, २.mसूचीकृतम्m + 1त्रीणि लम्बजालरेखाः सन्ति, यथा, त्रिपङ्क्तौ चत्वारि क्षैतिजजालरेखाः सन्ति ।

उपरि चित्रं ४ x ४ जालम् अस्ति यत्र कुलम् ५ क्षैतिजजालरेखाः ५ ऊर्ध्वाधरजालरेखाः च सन्ति ।

3. पात्रगुणाः

Grid layout इत्यस्य गुणाः द्वयोः वर्गयोः विभक्ताः सन्ति । एकः प्रकारः पात्रे परिभाषितः भवति तथा च पात्रगुणाः इति उच्यते अन्यः प्रकारः परियोजनायां परिभाषितः भवति तथा च परियोजनागुणाः इति उच्यते । अस्मिन् भागे प्रथमं पात्रगुणानां परिचयः भवति ।

३.१ प्रदर्शनविशेषणम्

display: gridजालविन्यासस्य उपयोगाय पात्रं निर्दिशति ।

div {
  display: grid;
}
1
2
3

उपरि चित्रम् अस्तिdisplay: gridइत्यस्यपरिणाम。

पूर्वनिर्धारितरूपेण, container elements block-level elements भवन्ति, परन्तु ते inline elements इत्यत्र अपि सेट् कर्तुं शक्यन्ते ।

div {
  display: inline-grid;
}
1
2
3

उपरि कोडः निर्दिशतिdivएकं inline element अस्ति यत् आन्तरिकरूपेण grid layout इत्यस्य उपयोगं करोति ।

उपरि चित्रम् अस्तिdisplay: inline-gridइत्यस्यपरिणाम。

ध्यानं कुर्वन्तु यत् grid layout इत्यत्र सेट् कृत्वा, container sub-elements (items)float、display: inline-block、display: table-cell、vertical-alignतथाcolumn-*अन्ये सर्वे सेटिङ्ग्स् अमान्याः भविष्यन्ति ।

३.२ grid-template-columns विशेषता, grid-template-rows विशेषता

पात्रेण जालविन्यासः निर्दिष्टस्य अनन्तरं ततः पङ्क्तयः स्तम्भाः च विभक्ताः भवेयुः ।grid-template-columnsगुणाः प्रत्येकस्य स्तम्भस्य स्तम्भविस्तारं परिभाषयन्ति,grid-template-rowsगुणः प्रत्येकस्य पङ्क्तौ पङ्क्ति-उच्चतां परिभाषयति ।

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}
1
2
3
4
5

कोडस्य उपरित्रिपङ्क्तयः त्रयः स्तम्भाः च युक्तं जालं निर्दिशति स्तम्भविस्तारः पङ्क्ति-उच्चता च उभयम्100px。

निरपेक्ष-एककानां उपयोगस्य स्थाने प्रतिशतस्य अपि उपयोगं कर्तुं शक्नुवन्ति ।

.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}
1
2
3
4
5

(१)पुनरावृत्ति() २.

कदाचित्, एकमेव मूल्यं पुनः पुनः लिखितुं अतीव कष्टं भवति, विशेषतः यदा बहवः जालपुटाः सन्ति ।अस्मिन् समये, भवन्तः उपयोक्तुं शक्नुवन्तिrepeat() पुनरावृत्तिमूल्यानि सरलीकरोति इति कार्यम् ।उपर्युक्तः कोडः उपयुज्यतेrepeat()पुनर्लिखितम् यथा ।

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}
1
2
3
4
5

repeat()द्वौ पैरामीटर् स्वीकुर्वति, प्रथमः पैरामीटर् पुनरावृत्तीनां संख्या (उपर्युक्ते उदाहरणे 3), द्वितीयः पैरामीटर् च पुनरावृत्तिः कर्तव्यः ।

repeat()एकं प्रतिरूपं पुनरावृत्तिः कुशलम्।

grid-template-columns: repeat(2, 100px 20px 80px);
1

कोडस्य उपरि६ स्तम्भाः परिभाषिताः सन्ति, प्रथमचतुर्थस्तम्भयोः विस्तारः अस्ति100px, द्वितीयः पञ्चमः च स्तम्भः20px, तृतीयस्तम्भः षष्ठस्तम्भश्च80px。

(2) स्वतः-पूरण कीवर्ड

कदाचित्, कोष्ठस्य परिमाणं नियतं भवति, परन्तु पात्रस्य परिमाणं अनिर्धारितं भवति ।यदि भवान् इच्छति यत् प्रत्येकं पङ्क्तिः (अथवा स्तम्भः) यथासंभवं कोष्ठकानां समायोजनं भवतु तर्हि भवान् उपयोक्तुं शक्नोतिauto-fillकीवर्ड्स स्वतःपूर्णं प्रतिनिधियन्ति।

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}
1
2
3
4

कोडस्य उपरिप्रत्येकस्य स्तम्भस्य विस्तारं प्रतिनिधियति100px, ततः स्वयमेव पूरयति यावत् पात्रं अधिकस्तम्भान् धारयितुं न शक्नोति ।

विहायauto-fill, एकः कीलशब्दः चauto-fit , उभयोः व्यवहारः मूलतः समानः एव ।केवलं यदा पात्रं सर्वान् कोष्ठान् एकस्मिन् पङ्क्तौ स्थापयितुं पर्याप्तं विस्तृतं भवति, कोष्ठविस्तारः च न नियतः भवतिव्यवहारभेदाः：auto-fillशेषविस्तारः रिक्तकोष्ठकैः पूरितः भविष्यति ।auto-fitकोष्ठकस्य विस्तारं विस्तारयितुं प्रयतते ।

(3) fr कीवर्ड

आनुपातिकसम्बन्धान् सुविधापूर्वकं व्यक्तीकर्तुं जालविन्यासः प्रदातिfr कीवर्ड (अंशस्य संक्षिप्तम्, अर्थात् "खण्डः")।यदि स्तम्भद्वयस्य विस्ताराः सन्ति1frतथा2fr, यस्य अर्थः उत्तरं द्विगुणं पूर्वम् ।

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
1
2
3
4

कोडस्य उपरिसमानविस्तारस्य द्वौ स्तम्भौ प्रतिनिधियति ।

frनिरपेक्षदीर्घता-एककानां सह संयोजनेन उपयोक्तुं शक्यते, यत् अतीव सुविधाजनकम् अस्ति ।

.container {
  display: grid;
  grid-template-columns: 150px 1fr 2fr;
}
1
2
3
4

कोडस्य उपरिप्रथमस्तम्भस्य विस्तारः १५० पिक्सेलः, द्वितीयस्तम्भस्य विस्तारः तृतीयस्तम्भस्य अर्धविस्तारः च इति अर्थः ।

(४)मिनटम्अधिकतम() २.

minmax() फंक्शन् दीर्घतापरिधिं उत्पादयति, यत् दीर्घता अस्मिन् परिधिमध्ये अस्ति इति सूचयति । न्यूनतमं मूल्यं अधिकतमं मूल्यं च इति द्वौ पैरामीटर् स्वीकुर्वति ।

grid-template-columns: 1fr 1fr minmax(100px, 1fr);
1

उपर्युक्ते संहितायां .minmax(100px, 1fr)स्तम्भविस्तारः न्यूनः नास्ति इति सूचयति100px,न अधिकं1fr。

(5)स्वचालित कीवर्ड

autoकीवर्ड-प्रतिपादनदीर्घता ब्राउजर्-द्वारा एव निर्धारिता भवति ।

grid-template-columns: 100px auto 100px;
1

उपर्युक्तसङ्केते द्वितीयस्तम्भस्य विस्तारः मूलतः स्तम्भे कोष्ठकस्य अधिकतमविस्तारस्य बराबरः भवति, यावत् कोष्ठसामग्री सेट् न भवतिmin-width, तथा च एतत् मूल्यं अधिकतमविस्तारात् अधिकं भवति ।

(6) जालरेखानां नाम

grid-template-columnsगुणाः चgrid-template-rowsगुणेषु भविष्ये सुलभसन्दर्भार्थं प्रत्येकस्य जालरेखायाः नाम निर्दिष्टुं वर्गकोष्ठकानां अपि उपयोगं कर्तुं शक्नुवन्ति ।

.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}
1
2
3
4
5

उपरिष्टाद् कोडः ३ पङ्क्तयः x ३ स्तम्भानां जालविन्यासं निर्दिशति, अतः ४ ऊर्ध्वाधरजालरेखाः ४ क्षैतिजजालरेखाः च सन्ति । वर्गकोष्ठकानां अन्तः अष्टरेखानां नामानि सन्ति ।

जालविन्यासः एकस्यामेव रेखायाः बहुनामानि अनुमन्यते, यथा[fifth-line row-5]。

(7) विन्यासोदाहरणम्

grid-template-columns जालपुटविन्यासस्य कृते गुणाः अतीव उपयोगिनो भवन्ति । द्विस्तम्भविन्यासस्य कृते केवलं एकां कोडपङ्क्तिः आवश्यकी भवति ।

.wrapper {
  display: grid;
  grid-template-columns: 70% 30%;
}
1
2
3
4

उपरिष्टात् कोडः वामस्तम्भं 70%, दक्षिणस्तम्भं 30% इति सेट् करोति ।

पारम्परिकः द्वादशजालविन्यासः अपि लिखितुं सुलभः अस्ति ।

grid-template-columns: repeat(12, 1fr);
1

३.३ जाल-पङ्क्ति-अन्तर-विशेषणम्, जाल-स्तम्भ-अन्तर-विशेषणं, जाल-अन्तर-विशेषणम्

grid-row-gapगुणः पङ्क्तयः (रेखान्तरं) मध्ये अन्तरं सेट् करोति,grid-column-gapगुणः स्तम्भानां मध्ये अन्तरं (स्तम्भान्तरं) सेट् करोति ।

.container {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}
1
2
3
4

कोडस्य उपरिमध्यं,grid-row-gapरेखाान्तरं सेट् कर्तुं प्रयुक्तम्, .grid-column-gapस्तम्भान्तरं सेट् कर्तुं प्रयुक्तम् ।

grid-gapगुणाः सन्तिgrid-column-gapतथाgrid-row-gap, इत्यस्य संयुक्तसंक्षेपरूपं , वाक्यविन्यासः यथा ।

grid-gap: <grid-row-gap> <grid-column-gap>;
1

अतः उपरिष्टात् CSS कोडस्य भागः निम्नलिखितसङ्केतस्य तुल्यः अस्ति ।

.container {
  grid-gap: 20px 20px;
}
1
2
3

यदिgrid-gapद्वितीयं मूल्यं लोपितं भवति तथा च ब्राउजर् द्वितीयं मूल्यं प्रथममूल्येन समं मन्यते ।

नवीनतममानकानुसारं उपर्युक्तत्रयविशेषनामgrid-उपसर्गः अपसारितः, .grid-column-gapतथाgrid-row-gapइति लिखितम्column-gapतथाrow-gap，grid-gapइति लिखितम्gap。

३.४ जाल-सारूप्य-क्षेत्राणां गुणः

जालविन्यासः "क्षेत्राणि" निर्दिष्टुं शक्नोति, ये एकेन वा बहुभिः कोष्ठकैः निर्मिताः सन्ति ।grid-template-areasक्षेत्राणां परिभाषार्थं गुणानाम् उपयोगः भवति ।

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas:
    'a b c'
    'd e f'
    'g h i';
}
1
2
3
4
5
6
7
8
9

उपर्युक्तः कोडः प्रथमं ९ कोष्ठकान् विभजति ततः तेषां नामकरणं करोतिaआगच्छतिiनव क्षेत्राणि क्रमशः एतेषां नवकोष्ठानां अनुरूपाः सन्ति ।

बहुकोशिकानां एकस्मिन् क्षेत्रे विलीनीकरणस्य लेखनविधिः यथा भवति ।

grid-template-areas:
  'a a a'
  'b b b'
  'c c c';
1
2
3
4

उपर्युक्तः कोडः ९ कोष्ठकान् विभजतिa、b、cक्षेत्रत्रयं ।

अधः उदाहरणविन्यासः अस्ति ।

grid-template-areas:
  'header header header'
  'main main sidebar'
  'footer footer footer';
1
2
3
4

उपरिष्टाद् कोड् मध्ये उपरि शीर्षकक्षेत्रम् अस्तिheader, अधः पादक्षेत्रम् अस्तिfooter, मध्यभागः अस्तिmainतथाsidebar。

यदि केषाञ्चन क्षेत्राणां शोषणस्य आवश्यकता नास्ति तर्हि "बिन्दून्" (.)व्यक्त।

grid-template-areas:
  'a . c'
  'd . f'
  'g . i';
1
2
3
4

उपर्युक्तसङ्केते मध्यस्तम्भः बिन्दुः अस्ति, यस्य अर्थः अस्ति यत् कोष्ठः न प्रयुक्तः, अथवा कोष्ठः कस्यापि क्षेत्रस्य नास्ति ।

ध्यानं कुर्वन्तु यत् प्रदेशानां नामकरणेन जालरेखाः प्रभाविताः भवन्ति ।प्रत्येकस्य क्षेत्रस्य आरम्भजालरेखा स्वयमेव नामकृता भवति区域名-start, समाप्तजालरेखा स्वयमेव नामकृता भवति区域名-end。

यथा क्षेत्रस्य नामheader, ततः आरम्भस्थाने क्षैतिजजालरेखाः लम्बजालरेखाः च उच्यन्तेheader-start, अन्त्यस्थाने क्षैतिजजालरेखाः लम्बजालरेखाः च उच्यन्तेheader-end。

३.५ जाल-स्वयं-प्रवाह-विशेषणम्

जालस्य विभक्तेः अनन्तरं पात्रस्य बालतत्त्वानि स्वयमेव प्रत्येकं जालपुटे क्रमेण स्थापितानि भविष्यन्ति । पूर्वनिर्धारितस्थापनक्रमः "पङ्क्तिः प्रथमः, स्तम्भद्वितीयः" अस्ति, अर्थात् प्रथमं प्रथमपङ्क्तिं पूरयन्तु, ततः द्वितीयपङ्क्तिं स्थापयितुं आरभत, यत् अधोलिखिते चित्रे सङ्ख्यानां क्रमः अस्ति

अयं आदेशः दत्तःgrid-auto-flowविशेषणेन निर्धारितं पूर्वनिर्धारितं मूल्यं भवतिrow , अर्थात् "पङ्क्तिः प्रथमं, ततः पङ्क्तिः" इति ।भवन्तः तत् अपि सेट् कर्तुं शक्नुवन्तिcolumn, "पङ्क्तिः प्रथमं, ततः पङ्क्तिः" भवति ।

grid-auto-flow: column;
1

कोडस्य उपरिपूर्वमेव सेटअप कृतम् अस्तिcolumnइतः परं नियुक्तिक्रमः अधः दर्शितवत् भविष्यति ।

grid-auto-flowविशेषतां सेट् कर्तुं अतिरिक्तंrowतथाcolumn, इत्यपि सेट् कर्तुं शक्यतेrow denseतथाcolumn dense . एतौ मूल्यौ मुख्यतया कतिपयानां वस्तूनाम् स्थानं नियुक्तं कृत्वा अवशिष्टानि वस्तूनि स्वयमेव स्थापयितुं उपयुज्यन्ते ।

अधः उदाहरणम्परियोजना क्रमाङ्कः १ परियोजना क्रमाङ्कः २ च प्रत्येकं द्वौ कोष्ठकौ आकर्षयन्तु, ततः पूर्वनिर्धारितरूपेणgrid-auto-flow: rowएवं सति निम्नलिखितविन्यासः उत्पाद्यते ।

उपरि चित्रे १ क्रमाङ्कस्य द्रव्यस्य पृष्ठतः स्थानं रिक्तं भवति यतोहि ३ क्रमाङ्कः पूर्वनिर्धारितरूपेण २ क्रमाङ्कस्य मदस्य अनुसरणं करोति, अतः २ क्रमाङ्कस्य द्रव्यस्य पृष्ठतः स्थानं प्राप्स्यति ।

अधुना सेटिङ्ग्स् परिवर्त्य सेट् कुर्वन्तुrow dense, इत्यस्य अर्थः "पङ्क्तिः प्रथमः, स्तम्भः द्वितीयः", तथा च यथासम्भवं कठिनतया पूरयन्तु यत्र रिक्तस्थानानि न सन्ति ।

grid-auto-flow: row dense;
1

कोडस्य उपरिप्रभावः यथा ।

उपरिष्टात् चित्रं प्रथमं प्रथमपङ्क्तिं पूरयिष्यति, ततः द्वितीयपङ्क्तिं पूरयिष्यति, अतः 3 मदः 1 मदस्य अनुसरणं करिष्यति । ८ क्रमाङ्कः ९ क्रमाङ्कः च मदाः चतुर्थपङ्क्तौ स्थापिताः भविष्यन्ति।

यदि भवान् सेटिङ्ग् परिवर्तयतिcolumn dense, इत्यस्य अर्थः "प्रथमस्तम्भः, ततः पङ्क्तिः", यथाशक्ति च रिक्तस्थानानि पूरयन्तु ।

grid-auto-flow: column dense;
1

कोडस्य उपरिप्रभावः यथा ।

उपरिष्टाद् चित्रं प्रथमं प्रथमस्तम्भं पूरयिष्यति, ततः द्वितीयस्तम्भं पूरयिष्यति, अतः प्रथमस्तम्भे ३ क्रमाङ्कः, द्वितीयस्तम्भे च ४ क्रमाङ्कः मदः अस्ति । ८, ९ च द्रव्यं चतुर्थे स्तम्भे निपीडितम् ।

३.६ justify-items विशेषता, align-items विशेषता, place-items विशेषता

justify-itemsगुणः कोष्ठसामग्रीयाः क्षैतिजस्थानं (वाम, केन्द्र, दक्षिण),align-itemsगुणः कोष्ठकसामग्रीणां ऊर्ध्वाधरस्थानं (ऊर्ध्वं, मध्यं, अधः) सेट् करोति ।

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}
1
2
3
4

एतौ विशेषणौ सम्यक् समानरूपेण लिखितौ स्तः, निम्नलिखितमूल्यानि ग्रहीतुं शक्नुवन्ति ।

• start: कोष्ठकस्य आरम्भिकधारं संरेखयन्तु।
• end: कोष्ठकस्य अन्त्यधारं प्रति संरेखणं कुर्वन्तु।
• center: कोष्ठकस्य अन्तः केन्द्रम्।
• stretch: कोष्ठकस्य सम्पूर्णविस्तारं पूरयितुं stretch (पूर्वनिर्धारितं मूल्यम्) ।

.container {
  justify-items: start;
}
1
2
3

कोडस्य उपरिकोष्ठकस्य सामग्री वामभागे संरेखिता इति सूचयति, प्रभावः च अधः दर्शितवत् अस्ति ।

.container {
  align-items: start;
}
1
2
3

कोडस्य उपरिकोष्ठकस्य सामग्री शिरः-संरेखिता इति सूचयति, प्रभावः च अधः दर्शितवत् अस्ति ।

place-itemsगुणाः सन्तिalign-itemsगुणाः चjustify-itemsगुणस्य संयुक्तं आशुलिपिरूपम् ।

place-items: <align-items> <justify-items>;
1

अधः उदाहरणम् अस्ति ।

place-items: start end;
1

यदि द्वितीयं मूल्यं लोप्यते तर्हि ब्राउजर् प्रथममूल्येन सह समं मन्यते ।

३.७ justify-content विशेषता, align-content विशेषता, स्थान-सामग्री विशेषता

justify-contentविशेषता पात्रस्य अन्तः सम्पूर्णस्य सामग्रीक्षेत्रस्य क्षैतिजस्थानं (वाम, केन्द्र, दक्षिण),align-contentविशेषता सम्पूर्णस्य सामग्रीक्षेत्रस्य (ऊर्ध्वं, मध्यं, अधः) ऊर्ध्वाधरस्थानं भवति ।

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
1
2
3
4

एतौ विशेषणौ सम्यक् समानरूपेण लिखितौ स्तः, निम्नलिखितमूल्यानि ग्रहीतुं शक्नुवन्ति । (अधः चित्राणि सर्वाणि आधारितानि सन्तिjustify-contentयथा गुणाःalign-content विशेषताचित्रं सम्यक् समानं भवति, केवलं क्षैतिज-अभिमुखीकरणं लम्ब-अभिमुखीकरणं प्रति परिवर्तितम् इति व्यतिरिक्तम् । ) ९.

• start - संरेखितस्य पात्रस्य आरम्भसीमा ।
  
• end - पात्रस्य अन्त्यसीमां संरेखयति ।
  
• center - पात्रं अन्तः केन्द्रीकृत्य।
  
• stretch - यदा द्रव्यस्य आकारः निर्दिष्टः न भवति तदा सम्पूर्णं जालपात्रं व्याप्तुम् stretch कुर्वन्तु ।
  
• space-around - प्रत्येकस्य द्रव्यस्य उभयतः समानं स्थानं । अतः वस्तुनां मध्ये अन्तरिक्षं द्रव्याणां पात्रसीमायाः च मध्ये यत् अन्तरं भवति तस्मात् द्विगुणं भवति ।
  
• space-between - वस्तुनां मध्ये समानं स्थानं भवति तथा च द्रव्याणां पात्रसीमायाः च मध्ये स्थानं नास्ति ।
  
• space-evenly - वस्तुनां मध्ये अन्तरिक्षं समानं भवति, द्रव्याणां पात्रसीमायाः च मध्ये अन्तरिक्षं समानदीर्घता भवति ।
  
  place-contentगुणाः सन्तिalign-contentगुणाः चjustify-contentगुणस्य संयुक्तं आशुलिपिरूपम् ।

place-content: <align-content> <justify-content>;
1

अधः उदाहरणम् अस्ति ।

place-content: space-around space-evenly;
1

यदि भवान् द्वितीयं मूल्यं परित्यजति तर्हि ब्राउजर् द्वितीयं मूल्यं प्रथममूल्येन समं इति कल्पयति ।

३.८ grid-auto-columns गुणः, grid-auto-rows गुणः

कदाचित्, केचन वस्तूनि विद्यमानजालस्य बहिः स्थानानि नियुक्तानि भवन्ति । यथा, जालस्य केवलं ३ स्तम्भाः सन्ति, परन्तु ५ पङ्क्तौ कश्चन द्रव्यः निर्दिष्टः अस्ति । अस्मिन् समये ब्राउजर् स्वयमेव अतिरिक्तजालम् उत्पद्यते येन वस्तूनि स्थापनं सुलभं भवति ।

grid-auto-columnsगुणाः चgrid-auto-rows ब्राउजर् द्वारा स्वयमेव निर्मितस्य अनावश्यकजालस्य स्तम्भविस्तारं पङ्क्ति-उच्चतां च सेट् कर्तुं गुणानाम् उपयोगः भवति ।यथा यथाgrid-template-columnsतथाgrid-template-rows सम्यक् समानम् । यदि एतौ गुणौ न निर्दिष्टौ भवतः तर्हि ब्राउजर् नूतनजालस्य स्तम्भविस्तारं पङ्क्ति-उच्चतां च पूर्णतया कोष्ठसामग्री-आकारस्य आधारेण निर्धारयति

अधः उदाहरणम्अन्तः विभक्तजालं ३ पङ्क्तयः x ३ स्तम्भाः सन्ति, परन्तु चतुर्थे पङ्क्तौ ८ क्रमाङ्कः द्रव्यं ५ पङ्क्तौ ९ क्रमाङ्कः निर्दिष्टः च ।

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-auto-rows: 50px;
}
1
2
3
4
5
6

उपरिष्टाद् कोडः निर्दिशति यत् नूतनपङ्क्ति-उच्चता समानरूपेण 50px (मूलपङ्क्ति-उच्चता 100px) अस्ति ।

३.९ जाल-सारूप्यविशेषणम्, जालविशेषणम्

grid-templateगुणाः सन्तिgrid-template-columns、grid-template-rowsतथाgrid-template-areasएतेषां त्रयाणां गुणानाम् संयुक्तं आशुलिपिरूपम्।

gridगुणाः सन्तिgrid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flowएतेषां षड्गुणानां संयुक्तसंक्षेपः ।

पठनलेखनसुलभतायाः दृष्ट्या विशेषणानां विलयनं न करणीयम् अतः एतयोः विशेषणयोः अत्र विस्तरेण परिचयः न भविष्यति ।

4. परियोजना विशेषताएँ

परियोजनायां निम्नलिखितगुणाः परिभाषिताः सन्ति ।

४.१ जाल-स्तम्भ-प्रारम्भ-गुणः, जाल-स्तम्भ-अन्त-गुणः, जाल-पङ्क्ति-प्रारम्भ-गुणः, जाल-पङ्क्ति-अन्त-गुणः

परियोजनायाः स्थानं निर्दिष्टुं शक्यते विशिष्टा पद्धतिः परियोजनायाः चत्वारि सीमाः निर्दिष्टुं तथा च काः जालरेखाः क्रमशः स्थापिताः सन्ति।

• grid-column-startगुणाः : ऊर्ध्वाधरजालरेखाः यत्र वामसीमा स्थिता अस्ति
• grid-column-endगुणः - ऊर्ध्वाधरजालरेखा यत्र दक्षिणसीमा स्थिता अस्ति
• grid-row-startगुणाः : क्षैतिजजालरेखा यत्र उपरितनसीमा अस्ति
• grid-row-endगुणाः : क्षैतिजजालरेखा यत्र अधः सीमा स्थिता अस्ति

.item-1 {
  grid-column-start: 2;
  grid-column-end: 4;
}
1
2
3
4

कोडस्य उपरि1 मदस्य वामसीमा द्वितीया लम्बवत् जालरेखा, दक्षिणसीमा च चतुर्थी ऊर्ध्वाधरजालरेखा इति निर्दिशति ।

उपरिष्टात् चित्रे केवलं मदस्य १ क्रमाङ्कस्य वामदक्षिणसीमा निर्दिष्टा, उपरितनसीमा च न निर्दिष्टा, अतः पूर्वनिर्धारितस्थानं प्रयुक्तं भविष्यति, अर्थात् ऊर्ध्वसीमा प्रथमा क्षैतिजजालरेखा अस्ति, तथा अधोसीमा द्वितीया क्षैतिजजालरेखा अस्ति।

१ क्रमाङ्कं विहाय अन्येषां द्रव्याणां निर्दिष्टस्थानानि नास्ति तथा च ब्राउजर् द्वारा स्वयमेव विन्यस्ताः भवन्ति अस्मिन् समये तेषां स्थानानि पात्रस्य द्वारा निर्धारितानि भवन्तिgrid-auto-flowविशेषणेन निर्धारितं अस्य विशेषणस्य पूर्वनिर्धारितं मूल्यं भवतिrow , अतः ते "पङ्क्तिः प्रथमं, ततः स्तम्भः" इति व्यवस्थापिताः भविष्यन्ति ।पाठकाः अस्य विशेषतायाः मूल्यं परिवर्तयितुं शक्नुवन्तिcolumn、row denseतथाcolumn dense, अन्येषां वस्तूनाम् स्थितिः कथं परिवर्तिता इति द्रष्टुं ।

अधः उदाहरणम्चतुर्णां सीमानां स्थाननिर्देशस्य प्रभावः ।

.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}
1
2
3
4
5
6

एतेषां चतुर्णां विशेषतानां मूल्यानि, जालरेखासङ्ख्यारूपेण निर्दिष्टस्य अतिरिक्तं, जालरेखायाः नामरूपेण अपि निर्दिष्टुं शक्यन्ते ।

.item-1 {
  grid-column-start: header-start;
  grid-column-end: header-end;
}
1
2
3
4

उपर्युक्तसङ्केते वामदक्षिणसीमायोः स्थानानि जालरेखायाः नामरूपेण निर्दिष्टानि सन्ति ।

एतेषां चतुर्णां विशेषतानां मूल्यानि अपि उपयोक्तुं शक्यन्तेspanकीवर्ड, "span" इति सूचयति, अर्थात् वामदक्षिणसीमायोः (ऊर्ध्वनीचसीमायोः) मध्ये कति जालपुटाः व्याप्ताः सन्ति ।

.item-1 {
  grid-column-start: span 2;
}
1
2
3

कोडस्य उपरि1 क्रमाङ्कस्य मदस्य वामसीमा दक्षिणसीमातः 2 जालपुटं व्याप्नोति इति सूचयति ।

इति सम्बन्धःकोडः अधः अस्तिप्रभावः अपि तथैव भवति ।

.item-1 {
  grid-column-end: span 2;
}
1
2
3

एतेषां चतुर्णां विशेषतानां उपयोगेन यदि द्रव्याणां आच्छादनं भवति तर्हि उपयोगं कुर्वन्तुz-indexगुणः वस्तूनाम् आच्छादितक्रमं निर्दिशति ।

४.२ जाल-स्तम्भ-विशेषणं, जाल-पङ्क्ति-विशेषणम्

grid-columnगुणाः सन्तिgrid-column-startतथाgrid-column-endइत्यस्य संयुक्तसंक्षेपरूपम्grid-rowगुणाः सन्तिgrid-row-startगुणाः चgrid-row-endविलयस्य संक्षिप्तरूपम् ।

.item {
  grid-column: <start-line/ <end-line>;
  grid-row: <start-line/ <end-line>;
}
1
2
3
4

अधः उदाहरणम् अस्ति ।

.item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}
1
2
3
4
5
6
7
8
9
10
11

उपर्युक्ते कोडे परियोजनाitem-1प्रथमपङ्क्तिं प्रथमस्तम्भरेखातः तृतीयस्तम्भरेखापर्यन्तं व्याप्तुम् ।

एतयोः विशेषणयोः मध्ये भवन्तः अपि उपयोक्तुं शक्नुवन्तिspanकियन्तः जालपुटाः व्याप्तव्याः इति सूचयति कीवर्डः ।

.item-1 {
  background: #b03532;
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
/* 等同于 */
.item-1 {
  background: #b03532;
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}
1
2
3
4
5
6
7
8
9
10
11

कोडस्य उपरिin, परियोजनाitem-1आक्रान्तक्षेत्रे प्रथमपङ्क्तिः + द्वितीयपङ्क्तिः, प्रथमस्तम्भः + द्वितीयस्तम्भः च अन्तर्भवति ।

स्लैशः निम्नलिखितभागाः च परित्यज्य पूर्वनिर्धारितरूपेण जालपुटं व्याप्तुं शक्यन्ते ।

.item-1 {
  grid-column: 1;
  grid-row: 1;
}
1
2
3
4

उपर्युक्ते कोडे परियोजनाitem-1उपरि वामकोणे प्रथमं जालम् आकर्षयन्तु ।

४.३ जाल-क्षेत्रविशेषणम्

grid-areaविशेषता यस्मिन् क्षेत्रे द्रव्यं स्थापितं तत् निर्दिशति ।

.item-1 {
  grid-area: e;
}
1
2
3

कोडस्य उपरिइत्यस्मिन् , परियोजना क्रमाङ्कः १eक्षेत्रं, प्रभावः अधः दर्शितवत् भवति ।

grid-areaगुणाः यथा अपि उपयोक्तुं शक्यन्तेgrid-row-start、grid-column-start、grid-row-end、grid-column-endविलीनसंक्षेपप्रपत्रं प्रत्यक्षतया परियोजनायाः स्थानं निर्दिशति ।

.item {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}
1
2
3

अधः कउदाहरण。

.item-1 {
  grid-area: 1 / 1 / 3 / 3;
}
1
2
3

४.४ justify-self attribute, align-self attribute, स्थान-आत्मविशेषणम्

justify-selfगुणः कोष्ठकसामग्रीणां क्षैतिजस्थानं (वाम, केन्द्र, दक्षिण) सेट् करोति, तदनन्तरंjustify-itemsगुणाः सम्यक् समानरूपेण उपयुज्यन्ते, परन्तु केवलं एकस्मिन् द्रव्ये एव प्रवर्तन्ते ।

align-selfगुणः कोष्ठसामग्रीणां ऊर्ध्वाधरस्थानं (ऊर्ध्वं, मध्यं, अधः) सेट् करोति, तदनन्तरंalign-itemsविशेषतानां उपयोगः सम्यक् समानः अस्ति, केवलं एकं परियोजनां प्रभावितं करोति ।

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}
1
2
3
4

उभयगुणाः निम्नलिखितचत्वारि मूल्यानि ग्रहीतुं शक्नुवन्ति ।

• start: कोष्ठकस्य आरम्भिकधारं संरेखयन्तु।
• end: कोष्ठकस्य अन्त्यधारं प्रति संरेखणं कुर्वन्तु।
• center: कोष्ठकस्य अन्तः केन्द्रम्।
• stretch: कोष्ठकस्य सम्पूर्णविस्तारं पूरयितुं stretch (पूर्वनिर्धारितं मूल्यम्) ।

अधः अस्तिjustify-self: startउदाहरणम् इति ।

.item-1 {
  justify-self: start;
}
1
2
3

place-selfगुणाः सन्तिalign-selfगुणाः चjustify-selfगुणस्य संयुक्तं आशुलिपिरूपम् ।

place-self: <align-self> <justify-self>;
1

अधः उदाहरणम् अस्ति ।

place-self: center center;
1

यदि द्वितीयं मूल्यं लोप्यते, .place-selfगुणः मूल्यद्वयं समानं मन्यते ।