‏چیدمان آجری با انیمیشن، این بار فقط با CSS

کریس کویر می‌نویسه که خبر خوب رسیده: display: grid-lanes داره به مرورگرها میاد و همون چیدمانی رو بومی می‌کنه که معمولاً بهش masonry می‌گیم. تو سافاری در دسترسه و تو کروم و فایرفاکس پشت فلگ قرار داره. نتیجه‌ش همون چیدمان پلکانی آیتم‌هاست که آدم رو یاد دیوار آجری می‌ندازه و اسمش هم از همین‌جا اومده.

اسم اصلی البته از کتابخانهٔ Masonry.js ساختهٔ دیوید دی‌ساندرو میاد (و بعدش Packery و Isotope). اون کتابخونه‌ها چیدمان پلکانی رو خوب پیاده کرده بودن، ولی پایه‌شون یه مشت المان floatشده بود.

نکته‌ای که نویسنده روش دست می‌ذاره اینه که Masonry.js یه برگ برندهٔ دیگه هم داشت: انیمیشن. اون کتابخونه سیالیت رو پشتیبانی می‌کرد، یعنی وقتی تعداد آیتم‌هایی که تو یه ردیف جا می‌شدن عوض می‌شد، دوباره محاسبه می‌کرد و المان‌ها رو با انیمیشن به جای جدیدشون می‌برد.

چیزی که کویر رو به فکر انداخت یه دموی برامس بود که همین جابه‌جایی متحرک رو با grid واقعی انجام می‌ده — بازمحاسبهٔ چیدمان از همون جادوی همیشگی repeat/auto-fill میاد، مثل grid-template-columns: repeat(auto-fill, 6rem);.

ترفند اصلی این دمو اینه که خود آیتم‌های grid انیمیت نمی‌شن. یه المان فرزندِ آیتم انیمیت می‌شه که با anchor positioning و یه مقدار inset که موقعیت سلول والد رو دنبال می‌کنه، کل ناحیهٔ grid رو می‌پوشونه:

.cell {
  anchor-scope: --grid-cell;
  anchor-name: --grid-cell;
}

.cell-content {
  transition: inset 0.2s ease;
  position: absolute;
  position-anchor: --grid-cell;
  inset: anchor(inside);
}

نویسنده می‌گه این برایش حسابی جادویی به‌نظر می‌رسه و بعید می‌دونه خودش بهش می‌رسید، چون آدم فکر می‌کنه برای پوشوندن سلول باید inset: 0 بذاری و اون‌وقت چیزی برای انیمیت‌کردن نمی‌مونه چون هیچ‌وقت تغییر نمی‌کنه. ولی ظاهراً anchor(inside) اون‌قدر پویا هست که انیمیت بشه، حتی اگه نتیجهٔ نهاییش عملاً همون inset: 0 باشه.

در آخر کویر همون دموی اصلی دیوید رو برداشته، جاوااسکریپت و floatها رو کامل بیرون کشیده، به‌جاش grid گذاشته و همین CSS بالا رو روش سوار کرده. به گفتهٔ خودش نتیجه به‌شکل قابل‌توجهی نزدیک به نسخهٔ جاوااسکریپتیه.

نکات کلیدی:

• ‏display: grid-lanes چیدمان masonry رو بومی می‌کنه؛ تو سافاری فعاله و تو کروم و فایرفاکس پشت فلگ
• بازمحاسبهٔ چیدمان با repeat(auto-fill, ...) انجام می‌شه، نه با جاوااسکریپت
• المانی که انیمیت می‌شه فرزند آیتم grid‌ـه، نه خود آیتم
• ‏inset: anchor(inside) برخلاف inset: 0 قابل انیمیت‌شدنه
• نتیجه به نسخهٔ جاوااسکریپتی Masonry.js خیلی نزدیکه، بدون هیچ اسکریپتی