justify-self प्रॉपर्टी

justify-self प्रॉपर्टी ग्रिड में किसी अलग एलिमेंट का हॉरिजॉन्टल अक्ष पर अलाइनमेंट सेट करती है। यह प्रॉपर्टी उसी एलिमेंट में लागू होती है जिसे हम अलाइन करना चाहते हैं।

सिंटैक्स

एलिमेंट {
	justify-self: start | center | end;
}

वैल्यूज

वैल्यू	विवरण
`flex-start`	एलिमेंट हॉरिजॉन्टल अक्ष की शुरुआत में चिपक जाता है।
`flex-end`	एलिमेंट हॉरिजॉन्टल अक्ष के अंत में चिपक जाता है।
`center`	एलिमेंट हॉरिजॉन्टल अक्ष के केंद्र में अलाइन हो जाता है।

उदाहरण . हॉरिजॉन्टल अक्ष की शुरुआत पर अलाइनमेंट

आइए हमारे पहले एलिमेंट के लिए अलाइनमेंट हॉरिजॉन्टल अक्ष की शुरुआत पर सेट करें:

<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);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}
#elem1 {
	justify-self: 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);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}
#elem1 {
	justify-self: center;
}

उदाहरण . हॉरिजॉन्टल अक्ष के अंत पर अलाइनमेंट

आइए पहले एलिमेंट के लिए अलाइनमेंट हॉरिजॉन्टल अक्ष के अंत पर सेट करें:

<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);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}
#elem1 {
	justify-self: end;
}

यह भी देखें

place-self प्रॉपर्टी,
जो ग्रिड में किसी अलग एलिमेंट का अलाइनमेंट सेट करती है
align-self प्रॉपर्टी,
जो एक ब्लॉक का अलाइनमेंट सेट करती है