Building responsive layouts with Grid In Hindi
एचटीएमएल वेब पेज में सीएसएस ग्रिड का उपयोग कर एक कम्पलीट रिस्पॉन्सिव वेबसाइट वेबपेज लेआउट बनाना आसान और पावरफुल मेथड है। जहा वेब डेवलपर अपने वेब डेवलपमेंट प्रोजेक्ट जरूरत के अनुसार फ्लेक्सीबल ग्रिड प्रॉपर्टीज फीचर्स और मीडिया क्वेरी एलिमेंट का उपयोग कर डिजायर वेब पेज लेआउट स्ट्रक्चर सीएसएस की मदद से आसानी से डेवलप कर सकते हैं. जो वर्त्तमान में उपलब्ध अलग-अलग मॉडर्न स्क्रीन साइज़ और इलेक्ट्रॉनिक डिवाइस गैजेट्स के हिसाब से ऑटोमेटिकली कस्टमाइज और एडजस्ट हो जाए।
CSS Grid Container in HTML Web Page Creating Basic Responsive Grid Layout.
तो चलिए अब हम एचटीएमएल वेब पेज में रेस्पॉन्सिव वेबपेज वेबसाइट लेआउट स्ट्रक्चर को बनाने के सभी पहलुओं को बेहतर तरीके से समझते है. जो आपके डिवाइस स्क्रीन व्यूपोर्ट साइज़ के आधार पर ऑटोमेटिकली एडजस्ट हो कर डिस्प्ले हो जाए।
Basic HTML Responsive Web Page 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 Responsive Css Grid Container Example</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: times new roman;
font-size: 20px;
font-weight: bold;
margin: 4;
padding: 4;
}
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); /* create a 170px responsive column */
gap: 14px; /* set display Space between grid items */
padding: 20px;
}
.grid-item {
background-color: teal;
color: white;
border: 1px solid yellow;
padding: 18px;
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”>Pages</div>
<div class=”grid-item”>About Us</div>
<div class=”grid-item”>Contact Us</div>
<div class=”grid-item”>Disclaimers</div>
</div>
</body>
</html>
Css Grid Container Code For Responsive Web Page.
* {
box-sizing: border-box;
}
body {
font-family: times new roman;
font-size: 20px;
font-weight: bold;
margin: 4;
padding: 4;
}
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); /* create a 170px responsive column */
gap: 14px; /* set display Space between grid items */
padding: 20px;
}
.grid-item {
background-color: teal;
color: white;
border: 1px solid yellow;
padding: 18px;
text-align: center;
}
Use of media query in css in HTML web page.
आप जो वेब पेज स्ट्रक्चर एचटीएमएल में बनांते है, उन्हें आप अलग-अलग डिवाइस स्क्रीन साइज़ के बेहतर डिस्प्ले के लिए और सीएसएस ग्रिड कंटेनर लेआउट स्ट्रक्चर को ऑटोमेटिकली एडजस्ट और प्रीव्यू करने के लिए सीएसएस में मीडिया क्वेरी का उपयोग कर उन्हें एक रेस्पॉन्सिव वेब लेआउट में डिस्प्ले कर सकते हैं।
@media (max-width: 700px) {
.grid-container {
grid-template-columns: 1fr; /* display single column layout */
}
}
@media (min-width: 400px) and (max-width: 800px) {
.grid-container {
grid-template-columns: repeat(2, 1fr); /* create two column for small screen */
}
}
Grid setup in CSS.
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) – यह वेब डेवलपर की जरूरत के अनुसार एक रिस्पॉन्सिव ग्रिड कंटेनर लेआउट को क्रिएट करता है. जहाँ प्रत्येक क्रिएट ग्रिड कॉलम कम से कम 180px आकर में चौड़ा है। इसमें अगर कोई अतिरिक्त जगह बचती है, तो ग्रिड कॉलम उपलब्ध ग्रिड एरिया को ऑटोमेटिकली फिल करते हैं।
Using media queries in CSS grid container.
जहा मौजूदा वेब पेज जरूरत के अनुसार फर्स्ट मीडिया क्वेरी 500px से स्माल डिवाइस स्क्रीन पर ग्रिड को एक कॉलम आर्डर में प्रीव्यू करती है।
वही सेकंड ग्रिड मीडिया क्वेरी 400px और 800px के बीच की डिवाइस स्क्रीन के लिए दो-कॉलम लेआउट को डिफाइन करती है।
So let’s understand the CSS media query source code in HTML web page.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let Tray Responsive Css Grid Container Example</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: times new roman;
margin: 7;
padding: 7;
}
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 14px;
padding: 14px;
}
.grid-item {
background-color: orange;
color: white;
border: 1px solid black;
padding: 17px;
text-align: center;
}
@media (max-width: 800px) {
.grid-container {
grid-template-columns: 1fr; /* create a single column layout for small screen */
}
}
@media (min-width: 400px) and (max-width: 800px) {
.grid-container {
grid-template-columns: repeat(2, 1fr); /* create two column for small screen */
}
}
</style>
</head>
<body>
<div class=”grid-container”>
<div class=”grid-item”>Home</div>
<div class=”grid-item”>Blog</div>
<div class=”grid-item”>Pages</div>
<div class=”grid-item”>About Us</div>
<div class=”grid-item”>Contact Us</div>
<div class=”grid-item”>Disclaimers</div>
</div>
</body>
</html>
Responsive CSS web page with grid container in HTML web page.
एचटीएमएल वेब पेज में सीएसएस ग्रिड कंटेनर में सीएसएस मीडिया क्वेरी के साथ ग्रिड का उपयोग करने से आप एक मल्टी-पर्पस और रेस्पॉन्सिव वेबसाइट वेब पेज लेआउट स्ट्रक्चर बना सकते हैं. जो वर्त्तमान में अवेलेबल कई डिवाइस और इलेक्ट्रॉनिक गैजेट्स में प्रॉपर्ली प्रीव्यू और फंक्शन करे। यहाँ आप अपनी वेब डिज़ाइन जरूरत के अनुसार इन्हे ग्रिड प्रॉपर्टीज के अनुसार कई तरह से कस्टमाइज कर सकते है.
