ترتیب آیتم شبکه (Grid Item Order)
در گرید (Grid)، «ترتیب آیتم شبکه» یعنی چیدمانِ دیداریِ آیتم ها. ویژگی «order» ترتیب نمایش را عوض می کند. اما ترتیب منطقیِ DOM تغییر نمی کند. بنابراین، صفحه برای ابزارهای کمکی همان ترتیب کد را می خوانَد.
تعریف سریع: order
ویژگی «order» یک عدد می گیرد. عدد کوچک تر زودتر دیده می شود. عدد بزرگ تر دیرتر دیده می شود. همچنین مقدار پیش فرض همه آیتم ها «0» است.
<style>
.item1 {
order: 3;
}
.item2 {
order: 6;
}
.item3 {
order: 1;
}
.item4 {
order: 2;
}
.item5 {
order: 4;
}
.item6 {
order: 5;
}
.container {
display: grid;
}
</style>
گام های عملی: تغییر ترتیب دیداری
- یک کانتینر گرید بساز.
- برای هر آیتم یک کلاس تنظیم کن.
- به کلاس ها مقدار «order» بده.
- ذخیره کن و نتیجه را ببین.
- اعداد را عوض کن و مقایسه کن.
هشدار: «order» فقط دیداری است؛ ترتیب DOM عوض نمی شود. بنابراین، خوانش صفحه توسط صفحه خوان ها طبق ترتیب کد خواهد بود.
نکات کاربردی ترتیب آیتم شبکه
اولاً از «order» برای جابه جایی موقت استفاده کن. ثانیاً برای سئو و دسترس پذیری، ساختار HTML را منطقی نگه دار. همچنین، فقط جایی که واقعاً لازم است آن را به کار ببر.
جمع بندی سریع
- order ترتیب دیداری را تغییر می دهد.
- DOM همچنان ثابت می ماند.
- اعداد کوچک تر زودتر دیده می شوند.
- با دسترس پذیری تداخل ممکن است.
برای ادامه مسیر، صفحه تراز آیتم شبکه و نام گذاری آیتم را ببین. همچنین، خود ترتیب آیتم شبکه را به عنوان مرجع نگه دار.