CSS ग्रिड्स का परिचय

CSS ग्रिड्स एक ऐसा तरीका प्रस्तुत करते हैं जिससे तत्वों को एक साथ क्षैतिज और ऊर्ध्वाधर दोनों तरह से व्यवस्थित किया जा सकता है। यह फ्लेक्सेस की तुलना में एक अधिक उन्नत तरीका है, लेकिन इसमें महारत हासिल करना अधिक कठिन है।

ग्रिड बनाने के लिए, तत्व को display गुण देना होगा जिसका मान grid हो:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
}

इसके बाद, तत्व एक द्वि-आयामी ग्रिड में बदल जाएगा, जिसमें तत्वों को ऊर्ध्वाधर (कॉलम) और क्षैतिज (पंक्तियाँ) दोनों तरह से व्यवस्थित किया जाता है। कॉलम और पंक्ति के प्रतिच्छेदन पर के क्षेत्र को सेल कहा जाता है।

विशेष गुणों की सहायता से तत्वों को पंक्तियों और कॉलम दोनों में व्यवस्थित किया जा सकता है। यह आसानी से ऐसी चीजें बनाने की अनुमति देगा, उदाहरण के लिए:

अगले पाठों में हम पहले कॉलम के अनुसार तत्वों की व्यवस्था का अध्ययन करेंगे, फिर पंक्तियों के अध्ययन पर आगे बढ़ेंगे, और उसके बाद इन सभी को एक साथ जोड़ देंगे।