Articles
CSS का परिचय
ग्रिड लेआउट से संबंधित CSS गुण

ग्रिड लेआउट से संबंधित CSS गुण

यह लेख ग्रिड लेआउट से संबंधित CSS गुणों को समझाता है।

आप ग्रिड और इनलाइन ग्रिड का वर्णन करना सीख सकते हैं।

YouTube Video

प्रीव्यू के लिए HTML

css-grid.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-grid.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Layout</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Layout Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>grid</h3>
 23            <section style="width: 100%; height: 350px;">
 24                <header><h4>display: grid; grid-template-columns: 100px 200px auto; grid-template-rows: 100px auto 50px;</h4></header>
 25                <section class="sample-view">
 26                    <div class="grid-box">
 27                        <div class="grid-item">Item 1</div>
 28                        <div class="grid-item">Item 2</div>
 29                        <div class="grid-item">Item 3</div>
 30                        <div class="grid-item">Item 4</div>
 31                        <div class="grid-item">Item 5</div>
 32                        <div class="grid-item">Item 6</div>
 33                    </div>
 34                </section>
 35            </section>
 36            <section style="width: 100%; height: 550px;">
 37                <header><h4>display: grid; grid-template-columns: 120px 1fr 80px; grid-template-rows: 100px 1fr 100px;</h4></header>
 38                <section class="sample-view">
 39                    <div class="grid-container" style="color: #666;">
 40                        <header class="grid-header">Header</header>
 41                        <aside class="grid-sidebar">Sidebar</aside>
 42                        <article class="grid-content">
 43                            <p>Content</p>
 44                        </article>
 45                        <aside class="grid-ads">Ads</aside>
 46                        <footer class="grid-footer">Footer</footer>
 47                    </div>
 48                </section>
 49            </section>
 50        </article>
 51        <article>
 52            <h3>gap</h3>
 53            <section style="height: 300px;">
 54                <header><h4>display: grid; gap: 30px 10px;</h4></header>
 55                <section class="sample-view">
 56                    <div class="gap-grid-container">
 57                        <div>Item 1</div>
 58                        <div>Item 2</div>
 59                        <div>Item 3</div>
 60                        <div>Item 4</div>
 61                        <div>Item 5</div>
 62                        <div>Item 6</div>
 63                    </div>
 64                </section>
 65            </section>
 66            <section>
 67                <header><h4>display: flex; gap: 50px;</h4></header>
 68                <section class="sample-view">
 69                    <div class="gap-flex-container">
 70                        <div>Item 1</div>
 71                        <div>Item 2</div>
 72                        <div>Item 3</div>
 73                    </div>
 74                </section>
 75            </section>
 76        </article>
 77        <article>
 78            <h3>grid-template-areas</h3>
 79            <section style="height: 350px;">
 80                <header><h4>grid-template-areas: "header header" "sidebar content" "footer footer";</h4></header>
 81                <section class="sample-view">
 82                    <div class="grid-template-areas-container">
 83                        <div class="grid-template-areas-header">Header</div>
 84                        <div class="grid-template-areas-sidebar">Sidebar</div>
 85                        <div class="grid-template-areas-content">Content</div>
 86                        <div class="grid-template-areas-footer">Footer</div>
 87                    </div>
 88                </section>
 89            </section>
 90        </article>
 91        <article>
 92            <h3>inline-grid</h3>
 93            <section>
 94                <header><h4>display: inline-grid</h4></header>
 95                <section class="sample-view">
 96                  Here is an inline grid:
 97                  <span class="inline-grid-container">
 98                      <div class="inline-grid-item">1</div>
 99                      <div class="inline-grid-item">2</div>
100                      <div class="inline-grid-item">3</div>
101                      <div class="inline-grid-item">4</div>
102                  </span>
103                  This is contained within a paragraph.
104                </section>
105            </section>
106        </article>
107    </main>
108</body>
109</html>

ग्रिड लेआउट

ग्रिड 

 1.grid-box {
 2    display: grid;
 3    grid-template-columns: 100px 200px auto;
 4    grid-template-rows: 100px auto 50px;
 5    gap: 10px;
 6    background-color: lightblue;
 7    border: none;
 8    height: 200px;
 9}
10
11.grid-item {
12    background-color: lightskyblue;
13    width: 100%;
14    padding: 0;
15    text-align: center;
16    border: 2px solid black;
17}

ग्रिड एक लेआउट प्रणाली है जो तत्वों को दो-आयामी पंक्तियों और स्तंभों में संरेखित करने के लिए उपयोग की जाती है। ग्रिड का उपयोग करके, आप पारंपरिक फ्लोट या पोजीशन विधियों की तुलना में जटिल लेआउट को आसानी से और लचीले तरीके से बना सकते हैं। जहां फ्लेक्सबॉक्स एक-आयामी लेआउट में उत्कृष्टता प्राप्त करता है, वहीं ग्रिड दो-आयामी लेआउट के लिए उपयुक्त है।

  • ग्रिड-बॉक्स क्लास डिस्प्ले प्रॉपर्टी में ग्रिड निर्दिष्ट करके एक ग्रिड लेआउट लागू करता है। इस तत्व को ग्रिड कंटेनर कहा जाता है।
  • ग्रिड-टेम्पलेट-कालम्स प्रॉपर्टी ग्रिड कॉलम की चौड़ाई निर्दिष्ट करती है। इस उदाहरण में, पहला कॉलम 100px है, दूसरा कॉलम 200px है, और तीसरा कॉलम शेष स्थान (ऑटो) को लेता है।
  • ग्रिड-टेम्पलेट-रोज़ प्रॉपर्टी ग्रिड रो के ऊंचाई को निर्दिष्ट करती है। पहली पंक्ति 100px है, दूसरी पंक्ति स्वचालित (ऑटो) है, और तीसरी पंक्ति 50px ऊंची है।
  • गैप प्रॉपर्टी ग्रिड आइटम्स के बीच का अंतराल सेट करती है। कॉलम और रो के बीच 10px का अंतर जोड़ना।

मूल शब्दावली

  1. ग्रिड कंटेनर वह तत्व है जिसकी डिस्प्ले प्रॉपर्टी ग्रिड पर सेट होती है, और इसके बच्चे ग्रिड आइटम बन जाते हैं।
  2. ग्रिड आइटम वे चाइल्ड एलिमेंट्स हैं जो सीधे ग्रिड कंटेनर के अंतर्गत आते हैं।

मुख्य ग्रिड प्रॉपर्टीज़

grid-template-columns & grid-template-rows 
1.container {
2    grid-template-columns: 1fr 2fr 1fr;
3}
  • ग्रिड-टेम्पलेट-कालम्स और ग्रिड-टेम्पलेट-रोज़ प्रॉपर्टीज़ प्रत्येक कॉलम और रो के आकार को परिभाषित करती हैं।
  • px और % जैसी यूनिट्स, साथ ही शेष स्थान के अनुपात को निर्दिष्ट करने के लिए fr (फ्रैक्शन) का उपयोग किया जा सकता है।
    • इस उदाहरण में तीन कॉलम हैं, और दूसरा कॉलम अन्य की तुलना में दोगुना चौड़ा है।
grid-column & grid-row 
 1.container {
 2  display: grid;
 3  grid-template-columns: repeat(4, 1fr); /* 4 columns */
 4  grid-template-rows: repeat(3, 100px); /* 3 rows */
 5}
 6
 7.item {
 8  grid-column: 2 / 4;
 9  grid-row: 1 / 3;
10}
  • grid-column और grid-row यह निर्धारित करते हैं कि ग्रिड आइटम किस कॉलम या पंक्ति में रखा जाएगा।
    • इस उदाहरण में, आइटम दूसरी कॉलम से चौथी कॉलम और पहली पंक्ति से तीसरी पंक्ति तक फैला हुआ है।
grid-auto-rows & grid-auto-columns 
 1.container {
 2  display: grid;
 3  grid-template-rows: 100px 200px; /* Explicitly define 2 rows */
 4  grid-template-columns: 1fr 2fr; /* Explicitly define 2 columns */
 5  grid-auto-rows: 150px; /* Automatically added rows will be 150px */
 6  grid-auto-columns: 100px; /* Automatically added columns will be 100px */
 7}
 8
 9.item {
10  grid-column: 3; /* Positioned in the 3rd column (auto-generated) */
11  grid-row: 3; /* Positioned in the 3rd row (auto-generated) */
12}
  • grid-auto-rows और grid-auto-columns ऐसी गुण हैं जो पंक्तियों और कॉलम की आकार को नियंत्रित करते हैं, जो स्वचालित रूप से उत्पन्न होते हैं जब ग्रिड लेआउट लाइनों या कॉलम को स्पष्ट रूप से परिभाषित नहीं किया जाता है।
    • इस उदाहरण में, 2 पंक्तियों और 2 कॉलम को स्पष्ट रूप से परिभाषित किया गया है, लेकिन यदि अधिक तत्व जोड़े जाते हैं, तो grid-auto-rows और grid-auto-columns के अनुसार नई पंक्तियाँ या कॉलम स्वचालित रूप से उत्पन्न होंगे।
justify-items & align-items 
1.container {
2    justify-items: center; /* Center items horizontally */
3    align-items: center;   /* Center items vertically */
4}
  • ग्रिड आइटम को क्षैतिज रूप से (justify-items) और लंबवत रूप से (align-items) संरेखित करें।
grid-area 
1/* grid-area syntax
2grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
3*/
4.item {
5    grid-area: 1 / 2 / 3 / 4;
6}
  • grid-area एक बार में यह निर्दिष्ट करता है कि ग्रिड कंटेनर में ग्रिड आइटम को किस क्षेत्र में रखा जाना चाहिए।
    • इस उदाहरण में, इसका मतलब है कि पहली पंक्ति से तीसरी पंक्ति और दूसरी कॉलम से चौथी कॉलम तक कब्जा करना।
gap 
1.container {
2    gap: 10px 20px; /* 10px space between rows, 20px space between columns */
3}
  • gap कॉलम और पंक्तियों के बीच जगह जोड़ता है। आप column-gap और row-gap का उपयोग करके कॉलम और पंक्तियों के बीच की दूरी को व्यक्तिगत रूप से भी निर्दिष्ट कर सकते हैं।
grid-auto-flow 
1.container {
2    grid-auto-flow: column; /* Add items in the column direction */
3}
  • grid-auto-flow एक प्रॉपर्टी है जो यह सेट करती है कि आइटम किस दिशा में रखे जाएंगे, या तो पंक्तियों के अनुसार या कॉलम के अनुसार।

जटिल लेआउट का उदाहरण। 

 1.grid-container {
 2    display: grid;
 3    grid-template-columns: 120px 1fr 80px;
 4    grid-template-rows: 50px 1fr 50px;
 5    gap: 10px;
 6    background-color: transparent;
 7    border: none;
 8    height: 400px;
 9}
10
11.grid-header {
12    grid-column: 1 / 4;
13    background-color: lightblue;
14}
15
16.grid-sidebar {
17    grid-column: 1 / 2;
18    grid-row: 2 / 3;
19    height: 100%;
20    background-color: lightslategray;
21    color: white;
22}
23
24.grid-content {
25    grid-column: 2 / 3;
26    grid-row: 2 / 3;
27    background-color: lightskyblue;
28}
29
30.grid-content p {
31    margin: 0;
32    padding: 0;
33    height: 260px;
34}
35
36.grid-ads {
37    grid-column: 3 / 4;
38    grid-row: 2 / 3;
39    height: 100%;
40    background-color: lightsteelblue;
41}
42
43.grid-footer {
44    grid-column: 1 / 4;
45    background-color: lightgray;
46}

इस प्रकार, ग्रिड आपको सरल कोड के साथ संपूर्ण वेबपेज लेआउट बनाने की अनुमति देता है।

  • इस उदाहरण में, तीन कॉलम (साइडबार, मुख्य सामग्री, और विज्ञापन) और तीन पंक्तियाँ (हेडर, सामग्री, और फुटर) हैं।
  • हेडर और फुटर पेज की पूरी चौड़ाई घेरते हैं, जिसमें सामग्री केंद्र में होती है और साइडबार और विज्ञापन दोनों ओर होते हैं।

ग्रिड के लाभ।

ग्रिड के फायदे निम्नलिखित बिंदुओं में शामिल हैं:।

  • आसान द्वि-आयामी लेआउट: पंक्तियों और कॉलम दोनों में लेआउट को प्रबंधित करना कम कोड के साथ जटिल लेआउट को प्राप्त करने की अनुमति देता है।
  • उत्तरदायी डिज़ाइन के साथ संगत: ग्रिड सिस्टम विभिन्न स्क्रीन आकारों के अनुसार अनुकूलन करने वाले उत्तरदायी डिज़ाइन बनाना आसान बनाता है।

gap गुण। 

 1.gap-grid-container {
 2    display: grid;
 3    grid-template-columns: repeat(3, 1fr);
 4    gap: 30px 10px;
 5    background-color: transparent;
 6    border: none;
 7    height: 200px;
 8}
 9
10.gap-grid-container div {
11    width: 100px;
12    background-color: lightskyblue;
13}
14
15.gap-flex-container {
16    display: flex;
17    gap: 50px;
18}
19
20.gap-flex-container div {
21    width: 80px;
22    background-color: lightgreen;
23}

gap गुण का उपयोग ग्रिड लेआउट और फ्लेक्सबॉक्स लेआउट में तत्वों के बीच की दूरी (अंतराल) सेट करने के लिए किया जाता है। इस गुण का उपयोग करके, आप आसानी से चाइल्ड तत्वों के बीच अंतराल प्रदान कर सकते हैं।

  • gap-grid-container क्लास में, प्रत्येक तत्व के बीच ऊर्ध्वाधर रूप से 30px और क्षैतिज रूप से 10px का अंतर सेट किया गया है। grid-template-columns का उपयोग करके 3-स्तंभ ग्रिड बनाया गया है, इसलिए प्रत्येक तत्व के बीच ऊर्ध्वाधर और क्षैतिज अंतर लागू किया जाता है। gap-flex-container क्लास में, फ्लेक्सबॉक्स के तीन आइटम्स के बीच 50px का अंतर लागू किया गया है।

मूल वाक्यविन्यास 

1.container {
2  display: grid; /* or flex */
3  gap: <row-gap> <column-gap>;
4}
  • row-gap पंक्तियों के बीच का अंतर निर्धारित करता है। यह ग्रिड या फ्लेक्स लेआउट में ऊर्ध्वाधर रिक्ति है।
  • column-gap स्तंभों के बीच का अंतर निर्धारित करता है। यह क्षैतिज रिक्ति है।

यदि दो मान निर्दिष्ट नहीं किए गए हैं, तो एक ही मान दोनों row-gap और column-gap पर लागू किया जाएगा।

gap प्रॉपर्टी के लाभ

gap प्रॉपर्टी के लाभ निम्नलिखित हैं:।

  • सरल अंतर सेटिंग: चाइल्ड तत्वों के बीच अंतर सेट करने का कोड सरल हो जाता है, जिससे तत्वों के बीच अतिरिक्त मार्जिन या पैडिंग सेट करने की आवश्यकता समाप्त हो जाती है।
  • लचीला अनुकूलन: यह आसानी से उत्तरदायी डिज़ाइन का समर्थन करता है, जिससे लचीले डिज़ाइन समायोजन संभव होते हैं।

grid-template-areas प्रॉपर्टी 

 1.grid-template-areas-container {
 2    display: grid;
 3    grid-template-columns: 1fr 2fr; /* 2 columns */
 4    grid-template-rows: auto auto;  /* 2 rows */
 5    grid-template-areas:
 6      "header header"
 7      "sidebar content"
 8      "footer footer"; /* In the 3rd row, the footer spans across */
 9    gap: 10px;
10    height: 250px;
11}
12
13.grid-template-areas-container div {
14    width: 100%;
15    height: 100%;
16}
17
18.grid-template-areas-header {
19    grid-area: header; /* Placed in the "header" area */
20    background-color: lightblue;
21}
22
23.grid-template-areas-sidebar {
24    grid-area: sidebar; /* Placed in the "sidebar" area */
25    background-color: lightslategray;
26}
27
28.grid-template-areas-content {
29    grid-area: content; /* Placed in the "content" area */
30    background-color: lightskyblue;
31}
32
33.grid-template-areas-footer {
34    grid-area: footer; /* Placed in the "footer" area */
35    background-color: lightsteelblue;
36}

grid-template-areas प्रॉपर्टी ग्रिड कंटेनर के भीतर क्षेत्रों को नाम देने और उन नामों का उपयोग करके ग्रिड तत्वों को आसानी से पोजिशन करने का तरीका प्रदान करती है। इस प्रॉपर्टी का उपयोग दृश्य रूप से सहज लेआउट परिभाषाएँ बनाने में मदद करता है।

grid-template-areas प्रॉपर्टी द्वारा निर्दिष्ट नामित क्षेत्रों में स्थित तत्वों को grid-area प्रॉपर्टी के साथ समान नाम सौंपा जाना चाहिए। भले ही तत्व कई सेल्स पर फैले हों, वे स्वचालित रूप से सही ढंग से पोजिशन हो जाते हैं।

इस उदाहरण में, ग्रिड इस प्रकार बनाया गया है:।

  • पहली पंक्ति में, "header" को दो स्तंभों में रखा गया है।
  • दूसरी पंक्ति में, "Sidebar" को बाईं ओर और "content" को दाईं ओर रखा गया है।
  • तीसरी पंक्ति में, "Footer" को दो स्तंभों में रखा गया है।

मूल उपयोग 

1grid-template-areas:
2    "area1 area2 area3"
3    "area1 area4 area5";

grid-template-areas प्रॉपर्टी में, प्रत्येक पंक्ति के लिए क्षेत्र का नाम निर्दिष्ट किया जाता है। तत्वों को निर्दिष्ट नामों वाले क्षेत्रों में रखकर, आप आसानी से लेआउट बना सकते हैं। - इस उदाहरण में, 2 पंक्तियों और 3 स्तंभों वाला ग्रिड बनाया गया है, और प्रत्येक सेल को area1, area2, आदि नाम दिए गए हैं।

खाली कोशिकाओं को . का उपयोग करके परिभाषित करना 

1grid-template-areas:
2  "header header header"
3  "sidebar . content"
4  "footer footer footer";

यदि आप अपने लेआउट में खाली कोशिकाएं चाहते हैं, तो आप खाली कोशिकाओं को . (डॉट) का उपयोग करके दर्शा सकते हैं। - जैसा कि इस उदाहरण में दिखाया गया है, sidebar और content के बीच . निर्दिष्ट करने से दूसरी कॉलम खाली हो जाती है।

grid-template-areas प्रॉपर्टी के फायदे

grid-template-areas प्रॉपर्टी के फायदे निम्नलिखित हैं:।

  • दृश्य लेआउट: यह लेआउट को दृश्य रूप से व्यक्त करने की अनुमति देता है, जिससे डिज़ाइन को समझना आसान हो जाता है।
  • आसान तत्व आंदोलन: आप HTML को बदले बिना, CSS में क्षेत्र परिभाषाओं को बदलकर तत्वों के लेआउट को आसानी से समायोजित कर सकते हैं।

नोट्स

grid-template-areas प्रॉपर्टी का उपयोग करते समय निम्न बिंदुओं पर ध्यान देना महत्वपूर्ण है:।

  • प्रत्येक पंक्ति में नामों की संख्या परिभाषित कॉलम की संख्या से मेल खानी चाहिए।
  • एक ही नाम को कई कोशिकाओं को सौंपने से वे कोशिकाएं मर्ज हो जाएंगी, लेकिन जब इसे विभिन्न पंक्तियों या कॉलम्स में सौंपा जाता है, तो क्षेत्र वर्गाकार होना चाहिए।

inline-grid 

 1.inline-grid-container {
 2    display: inline-grid;
 3    grid-template-columns: 1fr 1fr;
 4    gap: 5px;
 5    background-color: lightblue;
 6}
 7.inline-grid-item {
 8    background-color: lightskyblue;
 9    width: 50px;
10    padding: 0;
11    margin: 0;
12}

inline-grid, CSS में display प्रॉपर्टी के मूल्यों में से एक है। इस प्रॉपर्टी को लागू करने से तत्व एक इनलाइन-स्तरीय कंटेनर की तरह व्यवहार करता है और आंतरिक रूप से एक ग्रिड प्रारूपण संदर्भ बनाता है। display: grid के विपरीत, यह दस्तावेज़ प्रवाह में इनलाइन तत्व की तरह व्यवहार करता है।

inline-grid के उपयोग के मामले

inline-grid उतना सामान्य नहीं है जितना grid, लेकिन इसे विशिष्ट परिदृश्यों में प्रभावी ढंग से उपयोग किया जा सकता है।

  • इनलाइन संदर्भ में ग्रिड: तब उपयोगी होता है जब आप टेक्स्ट सामग्री या अन्य इनलाइन तत्वों के साथ ग्रिड रखना चाहते हैं। उदाहरण के लिए, यह तब सहायक होता है जब बटन, बैज, लेबल आदि के लिए ग्रिड संरचना की आवश्यकता होती है, लेकिन आप टेक्स्ट प्रवाह को बाधित किए बिना इनलाइन प्रदर्शित करना चाहते हैं।

  • इनलाइन तत्वों के भीतर लेआउट नियंत्रण: यहां तक कि जब जटिल लेआउट की आवश्यकता होती है जैसे लिंक, बटन, या स्पैन के अंदर, inline-grid ग्रिड लेआउट के साथ आंतरिक संरचना को प्रबंधित कर सकता है जबकि ब्लॉक डिस्प्ले से बचता है।

1<button class="inline-grid">
2    <span>Icon</span>
3    <span>Text</span>
4</button>

इस मामले में, बटन ग्रिड में आइकन और टेक्स्ट प्रदर्शित करता है, जबकि दस्तावेज़ प्रवाह में इनलाइन रहता है।

  • प्रतिक्रियाशील इनलाइन घटक: inline-grid का उपयोग छोटे घटकों के लिए किया जा सकता है जो इनलाइन सामग्री का हिस्सा हैं और जिन्हें ग्रिड लेआउट की आवश्यकता होती है। उदाहरण के लिए, यह इनलाइन फॉर्म्स, बैज, उत्पाद लेबल आदि के लिए उपयुक्त है, जहां आप लेआउट को ग्रिड के साथ समायोजित करना चाहते हैं जबकि इसे इनलाइन बनाए रखते हैं।

inline-grid का संरेखण और आकार निर्धारण 

1.inline-grid {
2    display: inline-grid;
3    vertical-align: middle;
4}
  • अन्य इनलाइन तत्वों की तरह, inline-grid चारों ओर की सामग्री के सापेक्ष ऊर्ध्वाधर संरेखण का पालन करता है। आप vertical-align प्रॉपर्टी का उपयोग करके ग्रिड के संरेखण को नियंत्रित कर सकते हैं।
1.inline-grid {
2    display: inline-grid;
3    width: 200px;
4    height: 100px;
5}
  • आकार के संदर्भ में, एक inline-grid तत्व केवल अपने ग्रिड सामग्री द्वारा आवश्यक चौड़ाई ही लेता है। यदि आवश्यक हो, तो आप स्पष्ट रूप से चौड़ाई, ऊंचाई, और न्यूनतम/अधिकतम आयाम सेट कर सकते हैं।
1.inline-grid {
2    display: inline-grid;
3    grid-template-columns: auto 1fr;
4}

यह भी संभव है कि ग्रिड की योजना ही inline-grid कंटेनर का आकार निर्धारित करे, और यह प्रवृत्ति तब अधिक मज़बूत होती है जब लचीले यूनिट जैसे fr, auto, और प्रतिशत का उपयोग किया जाता है।

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video

फ्लेक्सबॉक्स-संबंधित CSS प्रॉपर्टीज़कॉलम लेआउट से संबंधित CSS गुण