Grid Properties: Rows, Columns, Areas In Hindi
एचटीएमएल वेब पेज में सीएसएस ग्रिड कंटेनर में वेब डेवलपर के पास कई वेब स्ट्रक्चर और लेआउट को मैन्युअल रूप से कस्टमाइज करने के डिफ़ॉल्ट प्रॉपर्टीज विकल्प हैं. जिन्हे वेब डेवलपर अपनी जरूरत के अनुसार कभी भी मैन्युअल सीएसएस में अप्लाई कर सकता है. जिनमें यहाँ कॉमन ग्रिड प्रॉपर्टीज में ग्रिड कंटेनर रौस, कॉलम और ग्रिड फील्ड, ग्रिड रिपीट, ग्रिड ऑटो-फिल, ग्रिड आइटम अरेंजमेंट और अन्य कई ग्रिड प्रॉपर्टीज एंड फीचर्स हैं।
So let’s get to know the CSS grid properties in HTML web Page better.
CSS Grid Rows and Columns Properties in HTML Web Page.
वेब डेवलपर अपनी वेब डेवलपमेंट जरूरत के अनुसार मौजूदा ग्रिड कंटेनर में डिस्प्ले होने वाली ग्रिड रौस और कॉलम नंबर्स को डिफाइन कर सकते है। जहा वेब डेवलपर पर्टिकुलर वेब डेवलपमेंट जरूरत के अनुसार ग्रिड कॉलम रौ और ग्रिड के बिच में डिफ़ॉल्ट गैप को एडजस्ट कर प्रीव्यू कर सकते है।
CSS Grid Row Columns Example in HTML Web Page.
.grid-container {
display: grid;
grid-template-columns: 200px 200px 200px; /* create 3 columns with 200px widths */
grid-template-rows: 80px 120px; /* create 2 grid container rows with custom heights */
gap: 12px; /* set grid container Space between items */
}
Css grid repeat() properties in HTML web page.
वेब डेवलपर अपनी वेब डेवलपमेंट जरूरत के अनुसार मौजूदा ग्रिड कंटेनर में प्रत्येक ग्रिड कॉलम या ग्रिड रौ को मैन्युअल रूप से कस्टम डिफाइन करने की तुलना में आप नए ग्रिड रौ कॉलम को दोबारा उपयोग के लिए रिपीट के लिए ग्रिड repeat() फ़ंक्शन को बार बार उपयोग कर सकते हैं।
CSS Grid Repeat() Example in HTML Web Page.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* create 3 equal columns in grid container*/
grid-template-rows: repeat(1, 100px); /* create 1 rows of 100px each */
}
Css auto-fill and auto-fit properties in HTML web page.
मौजूदा एचटीएमएल वेब पेज में सीएसएस ग्रिड ऑटो-फिल प्रॉपर्टीज वेब डेवलपर को रिस्पॉन्सिव वेब पेज डिज़ाइन क्रिएट करने में हेल्प करते हैं. जिसमे मौजूदा डिवाइस और इलेक्ट्रॉनिक डिवाइस गैजेट्स साइज के अनुसार ग्रिड कॉलम और रौ अवेलेबल स्पेस के अनुसार स्वयं एडजस्ट हो कर प्रीव्यू होते हैं।
CSS Grid Auto-fill and Auto-fit Example in HTML Web Page.
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); /* it used to Columns fill the space */
}
CSS Grid Area Properties in HTML Web Page.
एचटीएमएल वेब डेवलपर सीएसएस में क्रिएटेड ग्रिड कंटेनर में ग्रिड एरिया से आप ग्रिड कंटेनर के स्पेसिफिक सेक्शन को क्रिएट कर उन्हें इंडिविजुअल डिफाइन कर सकते है। जहा यह वेब डेवलपर के लिए कई काम्प्लेक्स वेबसाइट ग्रिड लेआउट स्ट्रक्चर बनाने में अधिक उपयोगी होता है।
CSS Grid Area Example in HTML Web Page.
.grid-container {
display: grid;
grid-template-areas:
“header header header”
“sidebar content content”
“footer footer footer”;
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.footer {
grid-area: footer;
}
Adjusting css item placement properties in HTML web page.
आप अपने कस्टम डिज़ाइन वेब पेज में सीएसएस ग्रिड-कॉलम और ग्रिड-रौ जैसे सीएसएस ग्रिड कंटेनर प्रॉपर्टीज का उपयोग कर उन्हें मैन्युअल रूप से कण्ट्रोल और मैनेज कर सकते हैं. जिसमे डिस्प्ले होने वाले ग्रिड कंटेनर में प्रीव्यू ग्रिड आइटम को कहा और कैसे डिस्प्ले करना है, ये कण्ट्रोल किया जा सकता है।
CSS Grid Item Arrangement Example in HTML Web Page.
.grid-item-1 {
grid-column: 1 / 4; /* it Span from column 1 to column 4 */
grid-row: 2; /* it Stay in row 2 */
}
So let’s understand all the properties of CSS grid container in HTML web page in a better way in one example.
यहाँ आपके एचटीएमएल वेब पेज में सीएसएस का उपयोग कर पूरा उदाहरण दिया गया है. जो वेब पेज ग्रिड रौस, कॉलम, ग्रिड एरिया और ग्रिड आइटम प्लेसमेंट के उपयोग को दर्शाता है.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let Tray Grid Container Properties Example In Css</title>
<style>
.grid-container {
color:black;
text-align: center;
font-family: times new roman;
display: grid;
grid-template-areas:
“header header”
“sidebar content”
“footer footer”;
gap: 12px;
}
.header {
grid-area: header;
background-color: pink;
font-size:17px;
color: black;
font-weight: bold;
font-family: times new roman;
}
.sidebar {
grid-area: sidebar;
background-color: red;
font-size:17px;
color: black;
font-weight: bold;
font-family: times new roman;
}
.content {
grid-area: content;
background-color: blue;
font-size:17px;
color: black;
font-weight: bold;
font-family: times new roman;
}
.footer {
grid-area: footer;
background-color: teal;
font-size:17px;
color: black;
font-weight: bold;
font-family: times new roman;
}
</style>
</head>
<body>
<div class=”grid-container”>
<div class=”header”>Website Header Area</div>
<div class=”sidebar”>Sidebar Area</div>
<div class=”content”>Content Area</div>
<div class=”footer”>Footer Area</div>
</div>
</body>
</html>
