Table of contents
What is Grid in CSS?
शुरुआत में Web developer को डिजाइन करते समय सभी device के अनुसार पेज को डिजाइन करना काफी मुश्किल काम था। क्योंकि डिवाइस की चौड़ाई घटने या बढ़ने के साथ-साथ डिजाइन adjust नहीं हो पाती थी। तब इसे आसान करने के लिए Flex आया,लेकिन Flex भी सिर्फ एक ही लाइन या एक ही कालम को मैनेज करता है, तो सारी चीजों को आसान करने के लिए Grid layout वर्चस्व में आया। जब कई सारे लाइन row और कई सारे column एक दूसरे को काट रहे हों , तो कटा हुआ एक unit part grid कहलाता है। CSS में grid एक ऐसी style property है, जो लाइन और कालम दोनों पर कंट्रोल रखते हुए उन्हें आसानी से मैनेज कर सकता है।
What is the difference between Grid and Flex?
Flex से सिर्फ एक ही दिशा में items को मैनेज किया जा सकता है, मगर grid से एक ही साथ row और column दोनों में बदलाव किए जा सकते हैं। Flex सिर्फ एक लाइन या row पर कंट्रोल रख सकता है, सभी लाइन को मैनेज करने के लिए उसे नहीं बनाया गया है। उसी तरह सिर्फ एक ही कालम को flex कंट्रोल करता है, लेकिन grid सभी लाइन और सभी कालम को एक साथ मैनेज कर सकता है।
What is Grid Layout in CSS?
Grid layout model एक ऐसा system है, जो सभी devices पर आसानी से फिट हो जाता है। इसमें बनाई हुई वेब डिजाइन खराब नहींं होती है, जब किसी दूसरे छोटे या बड़े डिवाइस पर browse की जाती है, यह flexible होता है। Grid layout column और rows को मिलाकर बनाया गया है। वेब पेज के सभी बड़े section इसी layout में बनाए जाते हैं। यह एक table की तरह होता है, लेकिन इसमें सभी contents यानी grid बिना किसी extra style float वगैहर दिए बिना ही इसे छोटा बड़ा किया जाता है।
What are the terminologies of Grid?
Grid prperty को समझने के लिए इसके सभी term को इस प्रकार से समझा जा सकता है-
Element
इसमें एक parent element होता है, इसके अलावा सभी child element होते हैं। उदाहरण के लिए एक container div और उसके भीतर सभी child div, grid element हैं।
Row
यह पंक्ति row और कालम से मिलकर बना होता है। बांए साइड से शुरु होकर दाहिने साइड में जो एक ही लाइन में होता है, वह row पंक्ति होता है।
Column
Grid layout में जो element एक सीध में खड़ी व्यवस्था में होते हैं, column होते हैं।
Gap
दो पंक्तियो rows और दो columns के बीच के space को gap कहते हैं।
Line
Rows और columns में बांटने वाली रेखाएं line कहलाती हैं।
Grid Layout Properties
Grid Layout properties को दो तरह से देखा जाता है-
वह property, जो parent element या container पर लगाई जाती हैं।
वह property, जो child element या grid items पर लगाई जाती हैं।
Layout property को समझने के लिए Grid container और grid items को भी समझना जरूरी है।
What is Grid Container?
यह एक parent element होता है, जिसमें सभी child element, column और row से मिलकर बने होते हैं। यह सभी child elements के लिए एक container यानी एक बड़े बाक्स की तरह होता है।
What is the style property of a Grid Container?
Grid container में apply होने वाली grid property इस प्रकार हैं-
Grid-template-columns
इसमें कालम की व्यवस्था इस प्रकार से की जाती है कि जितने कालम बनाने हैं, उतने कालम की अलग-अलग width define करनी पड़ती है। यदि यह तय करना है कि width अपने अनुसार ले, तो auto उतनी बार लिखना होता है, जितनी column चाहिए होती है। लेकिन सबसे पहले display:grid; लिखा होना चाहिए।
इसके अलावा कुछ इस तरह से भी लिखी जा सकती है-
grid-template-columns:1fr 1fr 1fr;
grid-template-columns: 200px 200px 200px;
Special Functions:
repeat()
यह बार-बार न लिखने के लिए प्रयोग किया जाता है। जैसे
grid-template-columns: repeat(3,minmax(100px,2fr));
minmax()
किसी कालम की width की maximum value और minimum value देने के लिए होता है।
fr units
यह grid में एक यूनिट है, जो पूरी width को fraction में बांट देती है।
Grid -template-rows
यह हर row की height सेट करती है।
.container{width:500px;height: 300px;background-color: green;border:1px solid red;display:grid;grid-template-columns: 50px 100px 300px;grid-template-rows: 100px 100px 50px;font-size: 20px;text-align: center;gap:10px;}.box{background-color: yellow;}
grid-template-areas
यह layout में किसी specific item की layout सेट करने के लिए होती है। जैसे किसी कंटेनर में पहले वाले आइटम को पूरे row में फैलाने के लिए, लेकिन यह चीज ध्यान रखने योग्य है कि item की height width दोनों define नहीं होनी चाहिए, नहीं तो आइटम पूरी जगर नहीं ले पायेगा। इसके अलावा उस आइटम की style में
grid-area: area-name;define होनी चाहिए।.container{background-color: green;display:grid;grid-template-areas: 'mya mya mya mya ''. . . . ''. . . .';font-size: 20px;text-align: center;}.box{background-color: yellow;}.box1{grid-area: mya;background-color: rgb(166, 32, 32);}.box{background-color: yellow;}
Grid template
यह एक shorthand property है, जो grid-template-rows, grid template column, grid template areas को एक साथ लिखती है। अलग-अलग value को / से अलग किया जाता है। यहां row और column की property लिखी हुई है।
grid-template: 100px 50px/ 100px 100px 300px;Align-content
यह पूरी grid को vertically align करती है-
align-content: start;
यह शुरुआत में ले आती है।
.container{width:500px;height: 300px;background-color: green;border:1px solid red;display:grid;grid-template: auto auto/ auto auto auto;font-size: 20px;text-align: center;gap:10px;align-content: start;}.box{background-color: yellow;}
align-content: end;
align-content: center;
align-content: space-around;
align-content: space evenly;
Justify-content
यह grid के contents को horizontally align करता है।
justify-content: start;
.container{width:500px;height: 300px;background-color: green;border:1px solid red;display:grid;grid-template: auto auto/ auto auto auto;font-size: 20px;text-align: center;gap:10px;justify-content: start;}.box{background-color: yellow;width:100px;}
justify-content: end;
justify-content: center;
justify-content: space-around;
justify-content: space-evenly;
justify-content: space-between;
gap
यह सभी row और column के बीच space देता है। इसे अलग-अलग भी लिखा जा सकता है-
row-gap
इसी का एक और पुराना syntax grid-row-gap है। और यह सिर्फ row में gap देता है।
row-gap: 10px;
column-gap
इसी का एक और पुराना syntax grid-column-gap है। और यह सिर्फ column में gap देता है।
justify items
इसमें सभी आइटम अपनी ही grid cell के भीतर horizontally, start end center stretch value में align होता है।
align items
इसमें सभी आइटम अपनी ही grid cell के भीतर vertically, start end center stretch value में align होता है।
What is Grid items?
Grid container के अंदर के सभी child element Grid items कहे जाते हैं। यह पूरी row और कालम में by default होते हैं, मगर इन्हें दूसरी पंक्ति और दूसरे कालम में भी शिफ्ट किया जा सकता है।
What is the style property of grid items?
Grid items की style में लिखी जाने वाली कुछ property इस प्रकार हैं-
Grid-row
यह किसी आइटम का फैलाव span एक row से दूसरी row तक करता है। उदाहरण के लिए कोई आइटम का फैलाव पहली पंक्ति से तीसरी पंक्ति तक
.container{
width:500px;
height: 300px;
background-color: green;
border:1px solid red;
display:grid;
grid-template: auto auto/ auto auto auto;
font-size: 20px;
text-align: center;
gap:10px;
}
.box{
background-color: yellow;
}
.box1{
grid-row: 1/3;
}
Grid-column
यह किसी आइटम को एक कालम से दूसरे कालम तक span करता है। इसे बताना पड़ता है कि कौन से कालम से शुरु होकर किस कालम तक जायेगा।
.box1{
grid-column: 1/span 3;
}
अथवा grid-column: 1/ 4;
Grid-area
यह नीचे दी गई सभी property की shorthand है। यह आइटम को vertically और horizontally position देती हैं।
.box1{
grid-area: 2/2/span 2/span3;
}
grid-row-start
यह बताता है कि आइटम किस row से start होगा।
}
.box1{
grid-row: 2;
}
grid-row-end
यह बताता है कि आइटम किस row तक end होगा। या कहां तक फैलेगा।
.box1{
grid-row-end: span 2;
}
अथवा grid-row-end: 3;
grid-column-start
यह बताता है कि आइटम किस column तक start होगा।
.box1{
grid-column-start: 2;
}
grid-column-end
यह बताता है कि आइटम किस row तक end होगा। या कहां तक फैलेगा।
.box1{
grid-column-end: span 2;
}
Naming-grid
यह grid-area property है जो किसी आइटम की style में लिखी जाती है, लेकिन इसकी एक और property होती है, जो कंटेनर बॉक्स में लिखी जाती है।
grid-area:grid name; for example grid-area:box1_area;
justify-self
इसमें आइटम अपनी ही grid cell के भीतर horizontally, start end center stretch value में align होता है।
Align-self
इसमें आइटम अपनी ही grid cell के भीतर vertically, start end center stretch value में align होता है।