CSS ग्रिड में अलग-अलग एलिमेंट को अलाइन करने के लिए शॉर्टकट
आप एक साथ किसी अलग एलिमेंट को हॉरिजॉन्टल और वर्टिकल
दोनों एक्सिस पर अलाइन कर सकते हैं।
इसके लिए place-self प्रॉपर्टी का उपयोग किया जाता है।
यह स्पेस से अलग किए गए दो वैल्यू लेती है।
पहली वैल्यू वर्टिकल अलाइनमेंट को दर्शाती है,
और दूसरी - हॉरिजॉन्टल अलाइनमेंट को।
आइए उदाहरणों पर नज़र डालें।
वर्टिकल सेंटर और हॉरिजॉन्टल स्टार्ट
<div id="parent">
<div id="elem1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
#elem1 {
place-self: center start;
}
:
वर्टिकल स्टार्ट और हॉरिजॉन्टल एंड
<div id="parent">
<div id="elem1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
#elem1 {
place-self: start end;
}
:
वर्टिकल एंड और हॉरिजॉन्टल सेंटर
<div id="parent">
<div id="elem1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
#elem1 {
place-self: end center;
}
:
प्रैक्टिकल टास्क
पाँच एलिमेंट्स वाला एक ग्रिड बनाएँ और उन्हें तीन पंक्तियों में व्यवस्थित करें। पहले एलिमेंट को हॉरिजॉन्टल स्टार्ट और वर्टिकल सेंटर एक्सिस पर अलाइन करें।
पिछले टास्क को इस तरह बदलें, कि तीसरे एलिमेंट का अलाइनमेंट हॉरिजॉन्टल एंड और वर्टिकल सेंटर एक्सिस पर हो।
अब ग्रिड के एलिमेंट्स को दो पंक्तियों में व्यवस्थित करें और पाँचवें एलिमेंट का अलाइनमेंट हॉरिजॉन्टल सेंटर और वर्टिकल एंड एक्सिस पर सेट करें।
ऐसा करें कि दूसरा एलिमेंट हॉरिजॉन्टल स्टार्ट और वर्टिकल एंड एक्सिस पर अलाइन हो, और चौथा एलिमेंट - हॉरिजॉन्टल सेंटर और वर्टिकल स्टार्ट एक्सिस पर अलाइन हो।
