‏لایه‌های گرید CSS: زیبا اما بدون دسترس‌پذیری

نویسنده‌ی این پست بعد از دیدن یه ارائه درباره‌ی CSS Grid Lanes (که به Masonry Layout هم معروفه) تو رویداد CSS Day 2026، هم از تنوع کاربردهاش خوشش اومده و هم نگران شده که این تکنیک به‌صورت پیش‌فرض دسترس‌پذیر نیست. Grid Lanes برخلاف اسمش گرید واقعی نمی‌سازه؛ فقط ستون یا ردیف‌هایی می‌سازه که آیتم‌ها خودکار توشون پر می‌شن و شما فقط روی یه محور کنترل دارین:

.grid-lanes {
  display: grid-lanes;
  grid-template-columns: repeat(3, 1fr);
}

مرورگر هر آیتم رو تو نزدیک‌ترین ستون به لبه‌ی شروع کانتینر قرار می‌ده تا ستون‌ها تا حد امکان متعادل بشن. مشکل اینجاست که این جابه‌جایی خودکار باعث می‌شه ترتیب دیداری آیتم‌ها دیگه با ترتیب DOM (و در نتیجه ترتیب تب کیبورد) یکی نباشه. طبق WCAG Technique C27، این ناهماهنگی برای کاربرهایی که هم‌زمان از بزرگ‌نمایی و صفحه‌خون استفاده می‌کنن، کاربرهای کیبورد، و حتی همکاری بین کاربر نابینا و بینا مشکل‌ساز می‌شه.

ویژگی flow-tolerance اجازه می‌ده حد تشخیص «هم‌قد بودن» ستون‌ها رو تغییر بدین و همین‌جوری مقداری از این ناهماهنگی رو کم کنین. اما به گفته‌ی نویسنده، بعضی‌وقتا باید این مقدار رو خیلی بالا ببرین -- تو یکی از دموهای WebKit، نویسنده مجبور شد مقدارش رو تا ۴۰rem بالا ببره تا ناهماهنگی کاملاً از بین بره، که اون‌وقت خودش باعث نامتعادل شدن ارتفاع ستون‌ها و پرش عمودی فوکوس می‌شه.

به گفته‌ی نویسنده، راه‌حل بهتر ویژگی‌های جدید reading-flow و reading-order تو CSS ـه که ترتیب خوندن و تب رو مستقل از DOM، منطبق با ترتیب دیداری می‌کنن:

.reading-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  reading-flow: grid-rows;
}

مشکل اینجاست که reading-flow هنوز فقط تو مرورگرهای کرومیومی پیاده‌سازی شده و اصلاً با Grid Lanes کار نمی‌کنه؛ موضع سافاری و فایرفاکس هم هنوز مشخص نیست. نویسنده یه ترفند جالب دیگه هم پیشنهاد می‌ده: با :has(:focus-visible) می‌شه چیدمان رو فقط وقتی کاربر از کیبورد فوکوس می‌گیره، موقتاً به یه گرید معمولی تبدیل کرد -- راه‌حلی ناقص ولی جالب.

جمع‌بندی نویسنده اینه که فعلاً Grid Lanes به‌صورت پیش‌فرض دسترس‌پذیر نیست و اکثر توسعه‌دهنده‌ها احتمالاً بدون تنظیم flow-tolerance یا تست با کیبورد و صفحه‌خون ازش استفاده می‌کنن.

نکات کلیدی:

• Grid Lanes (Masonry Layout) چیدمان آیتم‌ها رو خودکار انجام می‌ده و کنترل کاربر فقط روی یه محوره
• جابه‌جایی خودکار آیتم‌ها معمولاً ترتیب دیداری رو از ترتیب DOM و تب کیبورد جدا می‌کنه
• flow-tolerance می‌تونه ناهماهنگی رو کم کنه ولی گاهی باید خیلی بالا تنظیم بشه
• ویژگی reading-flow راه‌حل بهتریه ولی هنوز فقط تو کرومیوم و بدون پشتیبانی از Grid Lanes پیاده‌سازی شده
• توصیه‌ی نویسنده: همیشه با کیبورد و صفحه‌خون تست کنین و در صورت نیاز از گرید معمولی استفاده کنین