CSS Grid Item Align
In this page:
item {
justify-self: start | center | end | stretch;
align-self: start | center | end | stretch;
}Item-Level Overrides क्यों मौजूद हैं
justify-items और align-items grid के हर item के लिए एक default alignment set करते हैं, लेकिन justify-self और align-self एक specific item को अपने siblings को असर किए बिना उस default से हटने देते हैं।
- Accepted values:
- justify-self — start | end | center | stretch
- align-self — start | end | center | stretch | baseline
- place-self — align फिर justify का shorthand
- auto — container की setting inherit करता है (default)
उदाहरण: Why Item-Level Overrides Exist
<style>
.container {
display: grid;
justify-items: start;
background: #eee;
padding: 10px;
gap: 10px;
}
.container div {
background: lightblue;
padding: 8px;
}
.special {
justify-self: end;
background: coral;
}
</style>
<div class="container">
<div>Default</div>
<div class="special">Overridden</div>
</div>justify-self: Horizontal Override
justify-self justify-items जैसी ही values accept करता है (start, end, center, stretch) लेकिन सिर्फ उस single item पर लागू होता है जहाँ यह declared है, container level पर justify-items ने जो भी set किया हो उसे override करते हुए।
- Accepted values:
- auto — default, container की justify-items इस्तेमाल करता है
- normal — grid items के लिए stretch जैसा behave करता है
- start | end | center | left | right — horizontal positions
- stretch — cell भरता है
- baseline — baselines align करता है
- self-start | self-end — logical alignment
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: justify-self: Horizontal Override
<style>
.container {
display: grid;
background: #eee;
padding: 10px;
}
.item {
justify-self: center;
background: coral;
padding: 8px;
}
</style>
<div class="container">
<div class="item">Centered horizontally, only this item</div>
</div>align-self: Vertical Override
align-self vertical equivalent है, container पर align-items को छुए बिना एक item को अपने siblings से अलग vertical axis पर align होने देते हुए।
- Accepted values:
- auto — default, container की align-items इस्तेमाल करता है
- normal — grid items के लिए stretch जैसा behave करता है
- start | end | center — vertical positions
- stretch — cell भरता है
- baseline — baselines align करता है
- self-start | self-end — logical alignment
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: align-self: Vertical Override
<style>
.container {
display: grid;
height: 150px;
background: #eee;
}
.item {
align-self: end;
background: coral;
padding: 8px;
}
</style>
<div class="container">
<div class="item">Aligned to the bottom, only this item</div>
</div>Common इस्तेमाल: एक Item को किसी Corner पर Pin करना
एक common pattern एक single item पर justify-self: end को align-self: start के साथ combine करना है, इसे इसके cell के top-right corner पर pin करते हुए जबकि बाकी हर item normal container alignment follow करता है।
- Accepted values:
- justify-self: end — cell के right edge पर pin करता है
- align-self: end — cell के bottom edge पर pin करता है
- place-self: end — दोनों एक साथ
- place-self: <align> <justify> — shorthand
उदाहरण: Common Use: Pinning One Item to a Corner
<style>
.container {
display: grid;
height: 150px;
background: #eee;
}
.badge {
justify-self: end;
align-self: start;
background: coral;
padding: 8px;
}
</style>
<div class="container">
<div class="badge">Pinned to the top-right corner</div>
</div>Container Defaults पर Precedence
जब एक container-level property (जैसे align-items: stretch) और एक item-level self property (जैसे align-self: center) दोनों एक ही item पर लागू होते हैं, तो item-level self property हमेशा जीतती है।
- Accepted values:
- align-self — align-items को override करता है
- justify-self — justify-items को override करता है
- place-self — दोनों का shorthand
- auto — container पर defer करता है
उदाहरण: Precedence Over Container Defaults
<style>
.container {
display: grid;
align-items: stretch;
height: 150px;
background: #eee;
}
.item {
align-self: center;
background: coral;
padding: 8px;
}
</style>
<div class="container">
<div class="item">align-self wins over the container's align-items</div>
</div>- container पर
justify-selfset करना, जबकि यह item पर होना चाहिए। - यह उम्मीद करना कि
align-selfकिसी flex layout पर grid जैसी ही तरह काम करेगा, जबकि यह एक cross axis पर काम करता है। - यह भूल जाना कि item alignment कुछ नहीं करता अगर item अपना पूरा grid area भर देता है।
CSS Grid Chrome 57+, Firefox 52+, Safari 10.1+ और Edge 16+ में supported है।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: