कैस्केडिंग स्टाइल शीट्स (सीएसएस) वेब विकास में एक आधारशिला तकनीक है, जो स्टाइल और लेआउट के लिए उपकरण प्रदान करती है। सीएसएस द्वारा पेश किए गए विभिन्न लेआउट मॉडलों में से, ग्रिड जटिल वेब लेआउट डिजाइन करने के लिए एक शक्तिशाली और सहज प्रणाली के रूप में सामने आता है। इस व्यापक गाइड में, हम आपको बहुमुखी और उत्तरदायी वेब डिज़ाइन बनाने में सशक्त बनाने के लिए सीएसएस ग्रिड की मूल बातें, इसके गुणों, अवधारणाओं और व्यावहारिक अनुप्रयोगों को शामिल करेंगे।
सीएसएस ग्रिड का परिचय
सीएसएस ग्रिड क्या है?
सीएसएस ग्रिड एक द्वि-आयामी लेआउट प्रणाली है जो वेब पेजों में ग्रिड-आधारित संरचनाओं के निर्माण को सक्षम बनाती है। यह डिजाइनरों और डेवलपर्स को पंक्तियों और स्तंभों दोनों को परिभाषित करने की अनुमति देता है, जिससे एक ग्रिड बनता है जहां सामग्री को सटीक रूप से रखा जा सकता है। सीएसएस ग्रिड लेआउट पर उच्च स्तर का नियंत्रण प्रदान करता है, जो इसे डिज़ाइन परिदृश्यों की एक विस्तृत श्रृंखला के लिए उपयुक्त बनाता है।
सीएसएस ग्रिड की प्रमुख अवधारणाएँ
सीएसएस ग्रिड के गुणों के बारे में जानने से पहले, आइए कुछ मूलभूत अवधारणाओं को समझें:
- ग्रिड कंटेनर: ग्रिड आइटम वाला मूल तत्व। इसे
डिस्प्ले
प्रॉपर्टी कोग्रिड
पर सेट करके परिभाषित किया गया है। - ग्रिड आइटम: ग्रिड कंटेनर के बच्चे। ये वे तत्व हैं जिन्हें परिभाषित ग्रिड के भीतर रखा गया है।
- ग्रिड रेखा: विभाजन रेखाएं जो ग्रिड के स्तंभों और पंक्तियों का निर्माण करती हैं। पंक्तियों को 1 से प्रारंभ करके क्रमांकित किया जा सकता है।
- ग्रिड ट्रैक: दो आसन्न ग्रिड लाइनों के बीच का स्थान। ग्रिड पंक्ति या स्तंभ को ट्रैक कहा जाता है।
- ग्रिड सेल: दो आसन्न पंक्ति और दो आसन्न कॉलम ग्रिड लाइनों के बीच का स्थान। यह ग्रिड की सबसे छोटी इकाई है।
- ग्रिड क्षेत्र: चार ग्रिड रेखाओं के बीच का आयताकार स्थान। इसमें एकाधिक ग्रिड कोशिकाएँ हो सकती हैं।
एक ग्रिड कंटेनर बनाना
एक बेसिक ग्रिड कंटेनर स्थापित करना
ग्रिड कंटेनर बनाने के लिए, कंटेनर की डिस्प्ले
प्रॉपर्टी को ग्रिड
पर सेट करें।
```css
.grid-container {
display: grid;
}
```
इस उदाहरण में, ग्रिड-कंटेनर
वर्ग वाला कोई भी तत्व ग्रिड कंटेनर बन जाता है, और उसके बच्चे ग्रिड आइटम बन जाते हैं।
ग्रिड कंटेनर गुण
- ग्रिड टेम्पलेट कॉलम (
ग्रिड-टेम्पलेट-कॉलम
): ग्रिड में कॉलम के आकार को परिभाषित करता है।
```css
.grid-container {
grid-template-columns: 100px 200px 100px; /* Explicit column sizes */
/* grid-template-columns: repeat(3, 1fr); */ /* Three columns with equal width */
/* grid-template-columns: auto 1fr auto; */ /* Automatic, one fraction, automatic */
}
```
- ग्रिड टेम्पलेट पंक्तियाँ (
ग्रिड-टेम्पलेट-पंक्तियाँ
): ग्रिड में पंक्तियों के आकार को परिभाषित करता है।
```css
.grid-container {
grid-template-rows: 50px 100px 50px; /* Explicit row sizes */
/* grid-template-rows: repeat(3, 1fr); */ /* Three rows with equal height */
/* grid-template-rows: auto 1fr auto; */ /* Automatic, one fraction, automatic */
}
```
- ग्रिड टेम्प्लेट (
ग्रिड-टेम्प्लेट
): कॉलम और पंक्तियों दोनों को परिभाषित करने के लिए एक शॉर्टहैंड संपत्ति।
```css
.grid-container {
grid-template: repeat(2, 1fr) / 100px 200px 100px; /* Two rows, three columns */
}
```
- कॉलम गैप (
कॉलम-गैप
): कॉलम के बीच गैप का आकार सेट करता है।
```css
.grid-container {
column-gap: 20px;
}
```
- रो गैप (
रो-गैप
): पंक्तियों के बीच गैप का आकार निर्धारित करता है।
```css
.grid-container {
row-gap: 10px;
}
```
- गैप (
गैप
): पंक्ति और स्तंभ दोनों के अंतराल को सेट करने के लिए एक शॉर्टहैंड संपत्ति।
```css
.grid-container {
gap: 20px 10px; /* Column gap 20px, row gap 10px */
}
```
- ग्रिड ऑटो कॉलम (
ग्रिड-ऑटो-कॉलम
): उन कॉलम का आकार सेट करता है जो स्पष्ट रूप से परिभाषित नहीं हैं।
```css
.grid-container {
grid-auto-columns: 100px; /* Default size for auto-generated columns */
}
```
- ग्रिड ऑटो पंक्तियाँ (
ग्रिड-ऑटो-पंक्तियाँ
): उन पंक्तियों का आकार सेट करता है जो स्पष्ट रूप से परिभाषित नहीं हैं।
```css
.grid-container {
grid-auto-rows: 50px; /* Default size for auto-generated rows */
}
```
- ग्रिड ऑटो फ्लो (
ग्रिड-ऑटो-फ्लो
): ऑटो-जेनरेटेड ग्रिड आइटम का स्थान निर्धारित करता है।
```css
.grid-container {
grid-auto-flow: row; /* Default value, new items placed in rows */
/* grid-auto-flow: column; */ /* New items placed in columns */
}
```
- ग्रिड टेम्पलेट क्षेत्र (
ग्रिड-टेम्पलेट-क्षेत्र
): ग्रिड क्षेत्रों को नाम निर्दिष्ट करता है, जिससे लेआउट को परिभाषित करने के अधिक दृश्य तरीके की अनुमति मिलती है।
```css
.grid-container {
grid-template-areas:
"header header"
"main sidebar"
"footer footer";
}
```
ग्रिड आइटम को समझना
ग्रिड आइटम का डिफ़ॉल्ट व्यवहार
डिफ़ॉल्ट रूप से, ग्रिड आइटम को उसी क्रम में रखा जाता है जिस क्रम में वे HTML में दिखाई देते हैं, उपलब्ध ग्रिड कोशिकाओं को भरते हुए।
```css
.grid-item {
/* No specific styling required */
}
```
ग्रिड आइटम गुण
- ग्रिड कॉलम (
ग्रिड-कॉलम
): कॉलम अक्ष के साथ ग्रिड आइटम की शुरुआत और अंत स्थिति निर्दिष्ट करता है।
```css
.grid-item {
grid-column: 2 / 4; /* Starts at column line 2, ends at column line 4 */
/* grid-column: span 2; */ /* Spans two columns */
}
```
- ग्रिड पंक्ति (
ग्रिड-पंक्ति
): ग्रिड आइटम की आरंभ और समाप्ति स्थिति निर्दिष्ट करती है
पंक्ति अक्ष के अनुदिश.
```css
.grid-item {
grid-row: 1 / 3; /* Starts at row line 1, ends at row line 3 */
/* grid-row: span 2; */ /* Spans two rows */
}
```
- ग्रिड क्षेत्र (
ग्रिड-क्षेत्र
):ग्रिड-पंक्ति
औरग्रिड-कॉलम
के लिए एक शॉर्टहैंड संपत्ति।
```css
.grid-item {
grid-area: 1 / 2 / 3 / 4; /* Row start / Column start / Row end / Column end */
}
```
- जस्टिफाई सेल्फ (
जस्टिफाई-सेल्फ
): एक ग्रिड आइटम को इनलाइन (पंक्ति) अक्ष के साथ संरेखित करता है।
```css
.grid-item {
justify-self: start; /* Default value */
/* justify-self: center; */
/* justify-self: end; */
}
```
- स्वयं को संरेखित करें (
संरेखित-स्वयं
): ब्लॉक (स्तंभ) अक्ष के साथ एक ग्रिड आइटम को संरेखित करता है।
```css
.grid-item {
align-self: start; /* Default value */
/* align-self: center; */
/* align-self: end; */
}
```
सीएसएस ग्रिड लेआउट के व्यावहारिक उदाहरण
एक बुनियादी ग्रिड लेआउट बनाना
तीन स्तंभों और तीन पंक्तियों वाले ग्रिड लेआउट का एक सरल उदाहरण।
```css
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
gap: 10px;
}
.grid-item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
```
```html
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
```
उत्तरदायी छवि गैलरी
स्वच्छ और लचीले लेआउट के लिए सीएसएस ग्रिड का उपयोग करते हुए एक प्रतिक्रियाशील छवि गैलरी।
```css
.gallery-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 10px;
}
.gallery-item {
width: 100%;
height: 200px;
background-size: cover;
background-position: center;
border-radius: 8px;
}
```
```html
<div class="gallery-container">
<div class="gallery-item" style="background-image: url('image1.jpg');"></div>
<div class="gallery-item" style="background-image: url('image2.jpg');"></div>
<div class="gallery-item" style="background-image: url('image3.jpg');"></div>
<!-- Add more gallery items as needed -->
</div>
```
रिस्पॉन्सिव कार्ड ग्रिड
एक कार्ड ग्रिड लेआउट जो सीएसएस ग्रिड के लचीलेपन को प्रदर्शित करते हुए स्क्रीन आकार के आधार पर समायोजित होता है।
```css
.card-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
.card {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 600px) {
.card-container {
grid-template-columns: 1fr;
}
}
```
```html
<div class="card-container">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
<!-- Add more cards as needed -->
</div>
```
सामान्य ग्रिड लेआउट पैटर्न
होली ग्रेल लेआउट
होली ग्रेल लेआउट, हेडर, फ़ूटर और तीन कॉलम वाला एक क्लासिक वेब डिज़ाइन पैटर्न, जहां केंद्र कॉलम मुख्य सामग्री है।
```css
.holy-grail {
display: grid;
grid-template-areas:
"header header"
"main sidebar"
"footer footer";
grid-template-columns: 1fr 3fr;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
.header,
.footer {
grid-area: header;
}
.main {
grid-area: main;
}
.sidebar {
grid-area: sidebar;
}
```
```html
<div class="holy-grail">
<header class="header">Header</header>
<main class="main">Main Content</main>
<aside class="sidebar">Sidebar</aside>
<footer class="footer">Footer</footer>
</div>
```
चिनाई लेआउट
सीएसएस ग्रिड का उपयोग करके प्रतिक्रियाशील कॉलम चौड़ाई के साथ एक चिनाई लेआउट।
```css
.masonry-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
}
.masonry-item {
width: 100%;
background-color: lightblue;
border-radius: 8px;
padding: 20px;
}
```
```html
<div class="masonry-container">
<div class="masonry-item">1</div>
<div class="masonry-item">2</div>
<div class="masonry-item">3</div>
<!-- Add more items as needed -->
</div>
```
ब्राउज़र संगतता और उपसर्ग
सीएसएस ग्रिड को आधुनिक ब्राउज़रों में व्यापक समर्थन प्राप्त है। हालाँकि, पुराने ब्राउज़र के साथ अनुकूलता के लिए, विक्रेता उपसर्ग या ऑटोप्रिफ़िक्सर जैसे टूल का उपयोग करने की अनुशंसा की जाती है। टूल का उपयोग यह सुनिश्चित करने में मदद करता है कि आपका कोड प्रत्येक विक्रेता के लिए अनावश्यक कोड लिखे बिना ब्राउज़रों की एक विस्तृत श्रृंखला पर काम करता है।
निष्कर्ष
अंत में, सीएसएस ग्रिड की मूल बातें समझने से वेब डेवलपर्स को परिष्कृत और उत्तरदायी लेआउट बनाने के लिए एक शक्तिशाली उपकरण मिलता है। चाहे आप एक साधारण ग्रिड, एक जटिल कार्ड लेआउट डिज़ाइन कर रहे हों, या होली ग्रेल लेआउट जैसे क्लासिक डिज़ाइन पैटर्न लागू कर रहे हों, सीएसएस ग्रिड एक बहुमुखी और कुशल समाधान प्रदान करता है।
जैसे ही आप अपनी परियोजनाओं में सीएसएस ग्रिड का पता लगाते हैं और लागू करते हैं, विशिष्ट डिज़ाइन आवश्यकताओं को पूरा करने के लिए इसे फ्लेक्सबॉक्स जैसे अन्य लेआउट मॉडल के साथ संयोजित करने पर विचार करें। जिज्ञासु बने रहें, विभिन्न लेआउट के साथ प्रयोग करें और निर्माण में अपने कौशल को निखारना जारी रखें
देखने में आकर्षक और उपयोगकर्ता के अनुकूल वेब डिज़ाइन। आपके टूलकिट के हिस्से के रूप में सीएसएस ग्रिड के साथ, आपके पास अपने लेआउट विचारों को सटीकता और सुंदरता के साथ जीवन में लाने की सुविधा है।