CSS Grid Align
In this page:
selector {
justify-content: start | center | end | space-between;
align-content: start | center | end | space-between;
}justify-items: Horizontal Item Alignment
justify-items control करता है कि हर item अपने ही cell के अंदर horizontally कैसे align होता है -- start, end, center, या default stretch, जो item को पूरी cell width भरने पर मजबूर करता है जब तक उसकी explicit width set न हो।
- Accepted values:
- justify-items: normal | stretch | start | end | center | self-start | self-end | baseline
- align-items: normal | stretch | start | end | center | self-start | self-end | baseline
- place-items — align-items फिर justify-items का shorthand
- justify-content: start | end | center | stretch | space-between | space-around | space-evenly
- align-content — block axis पर वही values
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: justify-items: Horizontal Item Alignment
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr;
justify-items: center;
background: #eee;
padding: 10px;
}
.container div {
background: steelblue;
color: white;
padding: 8px 16px;
}
</style>
<div class="container">
<div>Centered</div>
<div style="background: seagreen;">Centered</div>
</div>align-items: Vertical Item Alignment
align-items justify-items का vertical counterpart है, control करते हुए कि items अपने cell में top-to-bottom कैसे बैठते हैं, फिर से default stretch पर होते हुए ताकि items cell की height भरें।
- Accepted values:
- stretch — cell भरता है (grid में default normal यही करता है)
- start | end | center — items को उनके cell में vertically position करता है
- baseline — baselines align करता है
- self-start | self-end — logical alignment
- normal — default
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: align-items: Vertical Item Alignment
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr;
height: 150px;
align-items: center;
background: #eee;
}
.container div {
background: steelblue;
color: white;
padding: 8px;
}
</style>
<div class="container">
<div>Centered vertically</div>
<div style="background: seagreen;">Centered vertically</div>
</div>justify-content: Horizontal Grid Alignment
जब total track width container से छोटी हो, justify-content control करता है कि tracks का पूरा block container के अंदर horizontally कहाँ बैठता है -- start, end, center, space-between, space-around, space-evenly।
- Accepted values:
- start | end | center — grid को horizontally packs करता है
- stretch — auto tracks को expand करता है
- space-between | space-around | space-evenly — tracks distribute करता है
- normal — default, grid में stretch जैसा behave करता है
- नोट: container में free space चाहिए
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: justify-content: Horizontal Grid Alignment
<style>
.container {
display: grid;
grid-template-columns: 100px 100px;
width: 400px;
justify-content: center;
background: #eee;
border: 2px dashed #999;
gap: 4px;
}
.container div {
background: steelblue;
color: white;
padding: 8px;
text-align: center;
}
</style>
<div class="container">
<div>Track</div>
<div style="background: seagreen;">Track</div>
</div>align-content: Vertical Grid Alignment
align-content justify-content का vertical counterpart है, row tracks के पूरे block को container के अंदर position करते हुए जब total row height container height से कम हो।
- Accepted values:
- start | end | center — grid को vertically packs करता है
- stretch — auto tracks को expand करता है
- space-between | space-around | space-evenly — tracks distribute करता है
- normal — default, grid में stretch जैसा behave करता है
- नोट: container की height में free space चाहिए
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: align-content: Vertical Grid Alignment
<style>
.container {
display: grid;
grid-template-rows: 50px 50px;
height: 300px;
align-content: space-between;
background: #eee;
}
.container div {
background: steelblue;
color: white;
padding: 8px;
}
</style>
<div class="container">
<div>Row</div>
<div style="background: seagreen;">Row</div>
</div>place-items और place-content Shorthands
place-items align-items और justify-items को एक declaration में combine करता है (align value पहले), और place-content align-content/justify-content के लिए वही करता है -- एक बार जब आप चारों longhand properties को individually समझ लें तो उपयोगी shortcuts।
- Accepted values:
- place-items: <align> <justify> — align-items और justify-items का shorthand
- place-items: center — दोनों center
- place-content: <align> <justify> — align-content और justify-content का shorthand
- place-content: center — पूरी grid को center करता है
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: place-items and place-content Shorthands
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr;
height: 150px;
place-items: center start;
background: #eee;
}
.container div {
background: steelblue;
color: white;
padding: 8px;
}
</style>
<div class="container">
<div>place-items: align value first, justify value second</div>
</div>justify-*औरalign-*को mix करना, क्योंकि grid मेंjustifyhorizontal है औरalignvertical।justify-contentइस्तेमाल करना और effect की उम्मीद करना जब tracks पहले से container भर देती हैं।place-itemsको एक value के साथ इस्तेमाल करना और यह भूल जाना कि यह दोनों axes पर लागू होती है।
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: