CSS
ग्रिड

परिचय

टिप्पणियों

मूल उदाहरण

CSS ग्रिड को प्रदर्शन संपत्ति के रूप में परिभाषित किया गया है। यह एक मूल तत्व और उसके तत्काल बच्चों पर ही लागू होता है।

निम्नलिखित मार्कअप पर विचार करें:

<section class="container">
  <div class="item1">item1</div>
  <div class="item2">item2</div>
  <div class="item3">item3</div>
  <div class="item4">item4</div>
</section>

ग्रिड के रूप में ऊपर मार्कअप संरचना को परिभाषित करने का सबसे आसान तरीका केवल अपनी display संपत्ति को grid सेट करना grid :

.container {
  display: grid;   
}

हालाँकि, ऐसा करने से सभी बच्चे तत्व एक दूसरे के ऊपर गिर जाएंगे। ऐसा इसलिए है क्योंकि बच्चों को वर्तमान में यह नहीं पता है कि ग्रिड के भीतर खुद को कैसे रखा जाए। लेकिन हम उन्हें स्पष्ट रूप से बता सकते हैं।

पहले हम ग्रिड तत्व बताने की आवश्यकता .container कितने पंक्तियों और स्तंभों इसकी संरचना बना रहेगा और हम का उपयोग कर ऐसा कर सकते हैं grid-columns और grid-rows गुण (pluralisation ध्यान दें):

.container {
  display: grid;
  grid-columns: 50px 50px 50px;
  grid-rows: 50px 50px;
}

हालाँकि, यह अभी भी हमारी बहुत मदद नहीं करता है क्योंकि हमें प्रत्येक बाल तत्व को एक आदेश देने की आवश्यकता है। हम इसे grid-row और grid-column मान निर्दिष्ट करके कर सकते हैं जो यह बताएगा कि यह ग्रिड में कहां बैठता है:

.container .item1 {
  grid-column: 1;
  grid-row: 1;
}
.container .item2 {
  grid-column: 2;
  grid-row: 1;
}
.container .item3 {
  grid-column: 1;
  grid-row: 2;
}
.container .item4 {
  grid-column: 2;
  grid-row: 2;
}

प्रत्येक आइटम को एक कॉलम और पंक्ति मान देकर यह कंटेनर के भीतर आइटम ऑर्डर की पहचान करता है।

JSFiddle पर एक कार्यशील उदाहरण देखें। आपको इसे IE10, IE11 या एज में देखने की आवश्यकता होगी, क्योंकि यह वर्तमान में ग्रिड लेआउट (विक्रेता उपसर्ग -ms- ) का समर्थन करने वाले एकमात्र ब्राउज़र हैं या क्रम में caniuse के अनुसार क्रोम, ओपेरा और फ़ायरफ़ॉक्स में एक ध्वज सक्षम करते हैं उनके साथ परीक्षा देना।