CSS Grid Lanes: چیدمان Masonry بدون جاوااسکریپت
فرانتاندخلاصهٔ کاملتر
از وقتی CSS Grid سال ۲۰۱۷ منتشر شد، یکی از پرتکرارترین سوالهای توسعهدهندهها این بود که «چطور میشه یه چیدمان Masonry درست کرد؟» — همون چیدمان آجری یا آبشاری که آیتمها با ارتفاعهای مختلف کنار هم جا میگیرن، مثل برد عکس Pinterest. به گفتهٔ تیم وبکیت، تا همین حالا تنها راهش جاوااسکریپت بود که اغلب سنگین، شکننده و یهجورایی ناقص از آب درمیاومد.
حالا CSS Grid Lanes این نیاز رو بهصورت بومی و درست تو خود مرورگر حل میکنه. نکتهٔ اصلی که نویسندهها روش تاکید دارن اینه که این کار فقط با چهار خط CSS انجام میشه — بدون هیچ کتابخونه و فریمورکی — و در عین حال سریع و پایداره.
Grid Lanes چند گزینه برای تنظیم چیدمان میده. میتونی جهت جریان آیتمها رو بین حالت Waterfall (آبشاری) و Brick (آجری) عوض کنی، فاصله (gap) بین آیتمها رو تنظیم کنی و یه تلورانس برای نحوهٔ پخششدن آیتمها بین خطوط (lane) تعریف کنی. خود اسم Lanes هم به همین خطوط موازی برمیگرده که آیتمها توشون میچینن.
نویسندهها میگن این قابلیت سالها طراحی، نمونهسازی و بحث تو CSS Working Group رو پشت سر گذاشته و حالا به نتیجهای رسیده که بهش افتخار میکنن. کل سایت معرفی و دموهاش رو هم همون آدمهایی ساختن که از اول تو این پروژه دخیل بودن، و میگن هر ادعا و هر دیاگرام رو از نظر دقت بررسی کردن.
برای استفادهٔ عملی، این قابلیت تو Safari 26.4 یا بالاتر و مرورگرهای دیگهای که از Grid Lanes پشتیبانی میکنن در دسترسه. برای مرورگرهایی که هنوز پشتیبانی نمیکنن هم میشه با fallbackهای ساده شروع کرد، پس لازم نیست منتظر پشتیبانی همگانی بمونی. ابزار توسعهٔ Safari هم یه Grid Inspector داره که دقیقاً نشون میده آیتمها چطور بین خطوط جریان پیدا میکنن، که برای دیباگ چیدمان خیلی به کار میاد.
به گفتهٔ تیم، Grid Lanes خیلی بیشتر از یه چیدمان آبشاری کلاسیک کار میکنه و میشه باهاش کلی چیدمان مختلف ساخت — از گالری عکس و دستور پخت گرفته تا روزنامه، مگامنو و خط زمانی.
نکات کلیدی:
- CSS Grid Lanes چیدمان Masonry (آجری/آبشاری) رو بهصورت بومی و بدون جاوااسکریپت ممکن میکنه
- فقط با حدود چهار خط CSS و بدون کتابخونه یا فریمورک کار میکنه
- دو حالت جریان داره: Waterfall و Brick، بهعلاوهٔ تنظیم gap و تلورانس پخش آیتمها
- تو Safari 26.4 به بعد در دسترسه و برای مرورگرهای قدیمیتر fallback ساده داره
- ابزار توسعهٔ Safari با Grid Inspector جریان آیتمها بین خطوط رو نشون میده
