‏چیدمان جدول حذفی فیفا با ساب‌گرید

نویسنده می‌گه هر وقت چیدمان جالبی می‌بینه نمی‌تونه جلوی خودشو بگیره و DevTools رو باز می‌کنه، و بیشتر وقت‌ها می‌بینه چیدمان با یه هک ساخته شده. این بار سراغ صفحهٔ جدول حذفی جام جهانی فیفا رفته. چیزی که پیدا کرده اینه که تو سایت فیفا هر ستون یه المان جداست — حتی ستون‌هایی که به هم مربوطن، مثل دو سمت یه مرحله.

به نظر اون این یه هک برای شبیه کردن مارک‌آپ به طرحه. مارک‌آپ منطقی‌تر اینه که هر مرحله یه المان باشه و دو فرزند start و end داشته باشه. سؤال اصلی مقاله هم همینه: با این مارک‌آپ درست، چطور به همون چیدمان برسیم؟

جوابش گریده و مهم‌تر از اون subgrid. اول یه گرید هشت‌ستونی و چهارردیفه تعریف می‌شه، بعد هر مرحله کل گرید رو اسپن می‌کنه و با subgrid همون ستون‌ها و ردیف‌های والد رو به ارث می‌بره:

.round-of-8 {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

حالا start و end رو می‌شه روی همون گرید مشترک جا داد: اولی تو ستون اول و دومی تو آخرین ستون، هر دو با اسپن روی همهٔ ردیف‌ها. نویسنده برای ستون آخر به‌جای عدد ۸ از -2 استفاده می‌کنه، تا اگه بعداً تعداد ستون‌های گرید عوض شد لازم نباشه هر بار مقدار رو دستی اصلاح کنه.

دربارهٔ سایزهای کوچیک‌تر هم می‌گه تو ابعاد تبلت چیدمان همون شکل می‌مونه و فقط اسکرول‌شدنی می‌شه، ولی تو کوچیک‌ترین سایز همهٔ مرحله‌ها چپ‌چین می‌شن؛ یعنی تیم‌های یه مرحله همه تو یه ستون‌ان، نه تقسیم‌شده بین چپ و راست. خودش هم تأکید می‌کنه این فقط یه پیشنهاده، ممکنه ایراد داشته باشه و انیمیشن و افکت هاور رو پوشش نمی‌ده.

نکات کلیدی:

• تو سایت فیفا هر ستون یه المان جداست؛ مارک‌آپ شکل طرح رو تقلید می‌کنه
• مارک‌آپ پیشنهادی: هر مرحله یه المان با دو فرزند start و end
• subgrid روی ستون و ردیف، گرید والد رو به فرزند می‌ده
• استفاده از -2 به‌جای شمارهٔ ثابت ستون آخر
• تو کوچیک‌ترین سایز، همهٔ مرحله‌ها چپ‌چین می‌شن