‏کاشی‌های قدیمی بارسلونا با CSS Grid

کاشی hydraulic (یعنی کاشی سیمانی پرس‌شده، بدون کوره و لعاب) از دههٔ ۱۸۶۰ تو کاتالونیا رایج شد و با جنبش Modernisme به اوج هنری‌اش رسید. نویسنده می‌گه کف خونه‌اش هنوز همون کاشی‌های اصلیه و تقریباً هر اتاق نقش خودش رو داره. حالا همون کف رو با CSS بازسازی کرده: یه گرید ۹ ستونه و چهل و پنج کاشی، با شش نقش به اسم‌های Fan، Lens، Wedge، Star، Bloom و Weave.

ترفند اصلی ساده‌ست: هیچ نقش جدیدی کشیده نمی‌شه. چهار کاشی یکسان با یه قانون ثابت می‌چرخن و جای هر خونه تو بلوک دو در دو تعیین می‌کنه زاویهٔ چرخش (متغیر --tile-rot) چقدر باشه. خود شکل‌ها هم با ابزار ساده ساخته شدن: Fan یه radial-gradient() چسبیده به یه گوشه‌ست، Lens با گرد کردن دو گوشهٔ روبه‌رو در میاد و Star یه linear-gradient() با توقف سخت وسطه.

.cell--lens { background: var(--tile-color); border-radius: 0 70% 0 70%; }

دو نقش Bloom و Weave اصلاً نمی‌چرخن و عمداً روی همهٔ محورها متقارن‌ان. دلیلش رو نویسنده قشنگ توضیح می‌ده: وقتی لبه‌ها متقارن باشن، کمان هر کاشی ادامهٔ کمان کاشی بغلی می‌شه و چشم درز بین دو کاشی رو یه خط پیوسته می‌بینه. یعنی بخشی از نقش فقط وقتی وجود داره که کاشی‌ها کنار هم بشینن، نه داخل خود کاشی.

بخش فنی‌تر مطلب دربارهٔ کشیدن نقش روی درز کاشی‌هاست. برای اینکه یه ستاره دقیقاً سر محل تلاقی چهار کاشی بشینه، نویسنده یه لایهٔ overlay گذاشته با grid-template-columns: subgrid تا به جای حدس درصدی، همون خط‌های گرید اصلی رو به ارث ببره. تلهٔ ماجرا اینه که این overlay همهٔ خونه‌ها رو برای خودش برمی‌داره و چیدمان می‌ریزه؛ position: absolute اون رو از grid placement بیرون می‌کشه و مشکل حل می‌شه.

.overlay {
  position: absolute;
  inset: 0;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

نکات کلیدی:

• کل کف با CSS Grid و gradient ساخته شده، بدون هیچ فایل تصویری.
• شش نقش Fan، Lens، Wedge، Star، Bloom و Weave؛ گرید نمونه ۹ ستون و ۴۵ کاشی داره.
• چهار کاشی فقط با یه قانون چرخش (--tile-rot) کل الگو رو می‌سازن.
• Bloom و Weave چرخش ندارن، چون روی همهٔ محورها متقارن‌ان.
• subgrid خط‌های گرید والد رو به ارث می‌بره تا ستاره دقیقاً روی درز بشینه.
• بدون position: absolute لایهٔ overlay همهٔ خونه‌ها رو می‌گیره و گرید فرو می‌ریزه.