CSS Grid Item Order
In this page:
item {
order: integer;
}order क्या करता है
order एक integer accept करता है और grid (और flex) items का visual painting order control करता है -- कम order value वाले items ज़्यादा वाले items से पहले draw होते हैं, HTML source में उनकी position चाहे जो भी हो।
- Accepted values:
- order: <integer> — कम पहले आता है, default 0
- order: negative integer — किसी item को बाकियों से पहले move करता है
- नोट: source order और screen reader order unchanged रहते हैं
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: What order Does
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.a { order: 2; background: lightblue; padding: 8px; }
.b { order: 1; background: lightgreen; padding: 8px; }
</style>
<div class="container">
<div class="a">Coded first, painted second</div>
<div class="b">Coded second, painted first</div>
</div>Default order Value
हर item का एक implicit order 0 होता है जब तक आप इसे explicitly set न करें, इसलिए किसी item पर order: -1 set करना इसे बाकी untouched siblings से पहले move कर देता है, और order: 1 इसे उनके बाद move करता है।
- Accepted values:
- order: 0 — हर item के लिए default
- order: -1 — default items से पहले move करता है
- order: 1 — default items के बाद move करता है
- source order — tie-breaker
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: Default order Value
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.container div {
background: lightblue;
padding: 8px;
}
.first { order: -1; background: coral; }
</style>
<div class="container">
<div>Default order: 0</div>
<div class="first">order: -1, moves before</div>
</div>बिना HTML Edit किए Reorder करना
order आमतौर पर किसी item को visually promote करने के लिए इस्तेमाल होता है -- जैसे underlying markup या उसका source order छुए बिना किसी "featured" product card को आगे move करना।
- Accepted values:
- order: -1 — पहला
- order: 1 — आख़िरी
- order: <integer> — कोई भी position
- grid-row / grid-column — alternative explicit placement
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: Reordering Without Editing HTML
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.container div {
background: lightblue;
padding: 8px;
}
.featured { order: -1; background: coral; }
</style>
<div class="container">
<div>Product A</div>
<div class="featured">Featured product, visually promoted</div>
<div>Product B</div>
</div>Accessibility Trap
Screen readers और keyboard tab order अभी भी original HTML source order follow करते हैं, order पर set की गई visual order को नहीं -- इसलिए meaningful content reordering के लिए order पर निर्भर रहना users जो देखते हैं और assistive tech जो announce करता है उनके बीच एक confusing mismatch बना सकता है।
- Accepted values:
- order — सिर्फ visual order बदलता है
- tab order — DOM को follow करता है
- screen readers — DOM order में पढ़ते हैं
- reading-flow — focus order को sync में रखने वाली एक emerging property
उदाहरण: The Accessibility Trap
<style>
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.container div {
background: lightblue;
padding: 8px;
}
.second { order: -1; background: coral; }
</style>
<div class="container">
<div>First in HTML source and tab order</div>
<div class="second">Painted first visually, but still second in tab order</div>
</div>इसके बजाय असली HTML Reordering कब Prefer करें
किसी भी ऐसी reordering के लिए जो असली reading/interaction sequence बदलती है (सिर्फ decorative visual tweaks नहीं), element को खुद HTML में move करना order की तरफ़ जाने से ज़्यादा accessible choice है।
- Accepted values:
- HTML को reorder करें — meaning के लिए सबसे अच्छा
- order — सिर्फ cosmetic changes के लिए
- grid-template-areas — एक alternative जो DOM order भी untouched छोड़ता है
- नोट: DOM order को logical रखें
उदाहरण: When to Prefer Real HTML Reordering Instead
<style>
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.container div {
background: lightblue;
padding: 8px;
}
</style>
<div class="container">
<div>Moved here in the actual HTML, matching both visual and reading order</div>
<div>Second item</div>
</div>orderबदलना और यह भूल जाना कि keyboard focus और screen readers अभी भी HTML order follow करते हैं।- किसी ऐसे element पर
orderइस्तेमाल करना जो grid या flex item नहीं है। orderका भारी इस्तेमाल करना जब HTML को बस rearrange किया जा सकता था।
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: