CSS ग्रिड में कॉलम को मर्ज करना
इसी तरह से
grid-column प्रॉपर्टी का उपयोग करके
कॉलम को मर्ज किया जा सकता है।
मान लीजिए कि हमारे पास चार एलिमेंट्स वाला एक ग्रिड है। अब हम ऐसा करेंगे कि पहला, दूसरा और तीसरा एलिमेंट पहली पंक्ति में स्थित हों। और चौथा एलिमेंट पूरी दूसरी पंक्ति घेरे:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
</div>
#parent {
display: grid;
padding: 10px;
border: 2px solid #696989;
width: 400px;
height: 300px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-column: 1 / 2;
}
#elem2 {
grid-column: 2 / 3;
}
#elem3 {
grid-column: 3 / 4;
}
#elem4 {
grid-column: 1 / 4;
}
:
सभी एलिमेंट्स को प्लेस करें और निम्नलिखित उदाहरण के अनुसार कॉलम को मर्ज करें:
सभी एलिमेंट्स को प्लेस करें और निम्नलिखित उदाहरण के अनुसार कॉलम को मर्ज करें:
सभी एलिमेंट्स को प्लेस करें और निम्नलिखित उदाहरण के अनुसार कॉलम को मर्ज करें:
