CSS ग्रिड लेयउट मॉड्यूल

Header
Menu
Main
Right
Footer

अपने आप से प्रयास करें

ग्रिड लेआउट

CSS ग्रिड लेआउट मॉड्यूल (CSS Grid Layout Module) एक रेखा और स्तम्भ वाले आधारित ग्रिड लेआउट प्रणाली प्रदान करता है जो वेब पृष्ठ डिजाइन को आसान बनाता है और फ्लॉटिंग और पोजीशन के बिना काम करता है。

ब्राउज़र समर्थन

सभी आधुनिक ब्राउज़र ग्रिड गुण को समर्थित करते हैं。

57.0 16.0 52.0 10 44

ग्रिड एलिमेंट

ग्रिड लेआउट एक पारगमन एलिमेंट और एक या अधिक प्रत्यक्ष एलिमेंटों से मिलकर बना होता है。

इंस्टांस

<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>
1
2
3
4
5
6
7
8
9

अपने आप से प्रयास करें

Display गुण

जब HTML एलिमेंट का display गुण को grid या inline-grid तब यह ग्रिड कंटेनर बन जाता है。

इंस्टांस

.grid-container {
  display: grid;
}

अपने आप से प्रयास करें

इंस्टांस

.grid-container {
  display: inline-grid;
}

अपने आप से प्रयास करें

ग्रिड कंटेनर के सभी सीधे प्रत्यक्ष एलिमेंट स्वचालित रूप से ग्रिड एलिमेंट बन जाते हैं。

ग्रिड स्तम्भ (Grid Columns)

ग्रिड एलिमेंट की ऊंचाई को स्तम्भ कहा जाता है。

ग्रिड रोइज (Grid Rows)

ग्रिड एलिमेंट की लम्बाई को रेखा कहा जाता है。

ग्रिड अंतराल (Grid Gaps)

हर स्तम्भ/रेखा के बीच का अंतराल को अंतराल कहा जाता है。

आप किसी यह गुण का इस्तेमाल करके अंतराल का आकार समायोजित कर सकते हैं:

  • grid-column-gap
  • grid-row-gap
  • grid-gap

इंस्टांस

grid-column-gap यह गुण स्तम्भों के बीच का अंतराल सेट करता है:

.grid-container {
  display: grid;
  grid-column-gap: 50px;
}

अपने आप से प्रयास करें

इंस्टांस

grid-row-gap यह गुण रेखाओं के बीच का अंतराल सेट करता है:

.grid-container {
  display: grid;
  grid-row-gap: 50px;
}

अपने आप से प्रयास करें

इंस्टांस

grid-gap यह गुण grid-row-gap और grid-column-gap गुणों का छोटे से रूप है:

.grid-container {
  display: grid;
  grid-gap: 50px 100px;
}

अपने आप से प्रयास करें

इंस्टांस

grid-gap गुण का इस्तेमाल किया जा सकता है ताकि रेखा अंतराल और स्तम्भ अंतराल को एक ही मान के रूप में सेट किया जा सके:

.grid-container {
  display: grid;
  grid-gap: 50px;
}

अपने आप से प्रयास करें

ग्रिड लाइन (Grid Lines)

स्तम्भों के बीच की लाइनों को कॉलम लाइन (column lines) कहा जाता है。

पंक्तियों के बीच की लाइनों को रोड लाइन (row lines) कहा जाता है。

ग्रिड कंटेनर में ग्रिड प्रोजेक्ट को रखते समय, पंक्ति संख्या का संदर्भ लें:

इंस्टांस

ग्रिड प्रोजेक्ट को स्तम्भ 1 पर रखें और स्तम्भ 3 पर अंत में इसे समाप्त करें:

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

अपने आप से प्रयास करें

इंस्टांस

ग्रिड प्रोजेक्ट को वायर 1 पर रखें और वायर 3 पर अंत में इसे समाप्त करें:

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

अपने आप से प्रयास करें