Creating a Grid Container In Hindi
एचटीएमएल वेब पेज में ग्रिड कंटेनर बना कर किसी भी वेबपेज वेबसाइट में डिजिटल कंटेंट को कमर्शियल 2-d आर्डर में प्रीव्यू कर सकते है। जहा आप अपनी वेब डेवलपमेंट जरूरत के अनुसार आसानी से किसी भी प्रकार के रिस्पॉन्सिव वेब पेज लेआउट डेवलप करने में सीएसएस ग्रिड कंटेनर का कही भी उपयोग कर सकते हैं।सीएसएस वेब पेज डेवलपमेंट में ग्रिड कंटेनर एक पावरफुल वेब पेज लेआउट स्ट्रक्चर डिज़ाइन मेथड है. जो सीएसएस वेब डेवलपर को अपनी जरूरत के अनुसार आसानी से काम्प्लेक्स, यूजर डिफाइन रिस्पॉन्सिव वेब पेज और 2-डायमेंशनल वेब पेज स्ट्रक्चर लेआउट बनाने में हेल्प करता है। सीएसएस में ग्रिड कंटेनर को रौस और कॉलम में डिवाइड कर वेब पेज टेक्स्ट इनफार्मेशन को डिस्प्ले करता है. जहाँ आप क्रिएटेड ग्रिड कंटेनर के अंदर डिजायर वेब पेज टेक्स्ट आइटम इनफार्मेशन को प्रॉपर आर्डर में प्रीव्यू करते हैं। जहा सीएसएस ग्रिड कंटेनर से आप ओल्ड फ़्लोट या इनलाइन-ब्लॉक जैसी सीएसएस लेआउट मेथड की तुलना में हॉरिजॉन्टल और वर्टीकल बोथ डायरेक्शन में वेब पेज एलिमेंट्स पोजीशन और कंटेंट को अलाइन कर कण्ट्रोल और मैनेज कर सकते है।

Create a basic css grid container html 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 Example In Css</title>
<style>
grid
* {
box-sizing: border-box;
}
body {
font-family: times new roman;
margin: 10;
padding: 10;
}
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 14px;
padding: 20px;
}
.grid-item {
background-color: blue;
color: white;
border: 2px solid #444;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class=”grid-container”>
<div class=”grid-item”>Home</div>
<div class=”grid-item”>Blog</div>
<div class=”grid-item”>Contact Us</div>
<div class=”grid-item”>About Us</div>
<div class=”grid-item”>Pages</div>
<div class=”grid-item”>Disclaimers</div>
</div>
</body>
</html>
Grid container explanation in CSS.
- HTML – एचटीएमएल वेब पेज में सीएसएस ग्रिड कंटेनर और ग्रिड आइटम के साथ आप एक डिजायर वेब पेज स्ट्रक्चर या लेआउट डेवलप कर सकते है।
- CSS – एचटीएमएल वेब पेज में सीएसएस ग्रिड-कंटेनर ग्रिड लेआउट को इनेबल करने के लिए डिस्प्ले: ग्रिड सीएसएस प्रॉपर्टीज का उपयोग किया जाता है।
- grid-template-columns properties – यहाँ repeat(auto-fill, minmax(170px, 1fr)) रिस्पॉन्सिव सीएसएस ग्रिड कॉलम क्रिएट करता है. जो वेब ब्राउज़र व्यूपोर्ट की चौड़ाई के आधार पर अपने आप डिवाइस ब्राउज़र में अपने आप एडजस्ट हो जाते हैं। जहा आप अपनी जरूरत के अनुसार प्रत्येक ग्रिड कॉलम की न्यूनतम विड्थ 170px एडजस्ट या सेट करते है।
- gap properties – सीएसएस ग्रिड प्रॉपर्टीज मौजूदा ग्रिड आइटम के मध्य एक निश्चित मात्रा में स्पेस या गैप को एडजस्ट करता है।
- .grid-item properties – सीएसएस में ग्रिड आइटम ग्रिड में डिस्प्ले होने वाले टेक्स्ट इनफार्मेशन और ग्रिड एलिमेंट है. जहा आप प्रत्येक ग्रिड आइटम एलिमेंट को बैकग्राउंड कलर, टेक्स्ट कलर, मार्जिन, स्पेस पैडिंग और बॉर्डर ऐट्रिब्यूट्स के साथ मैन्युअल कस्टम फॉर्मेट किया जाता है।