Що ж це за задача, рішення якої принесло мені днями стільки задоволення, що я аж цілий допис написав про це відчуття?

Ось вона — на ілюстрації до допису. Треба було зробити картку з динамічним лейаутом, де ширина першого елемента дорівнює найширшому з усіх, а висота самої картки — динамічна. Картки мають тягатися драг-н-дропом, при цьому використовуються наші внутрішні компоненти з дизайн-системи, які додають кілька обгорток, а сам вміст вставляється вже вглиб.

Очевидно, що таблиця не підійде (але я б її не взяв і так). Тому вибір очевидний — CSS Grid.

Отут постає кілька вимог, які дещо можуть завадити швидкій та наївній імплементації:
— ширина першої колонки — спільна, бо там номер картки;
— висота — довільна, однак grid за замовчуванням має однакові рядки;

І тут я згадав про subgrid:

.container {
  display: grid;
  grid-template-columns: min-content 1fr;
}

.card {
  display: grid;
  grid-template-columns: subgrid;
}

Тут нюанс — якщо між головною сіткою і "наслідувачем" є обгортки, їм усім треба так само “прокинути” цю сітку:

:where(.wrapper-1, .wrapper-2, …, .wrapper-n, .card) {
  display: grid;
  grid-template-columns: subgrid;
}

І тоді сітка буде спільна для усіх елементів, незалежно, як вони між собою вкладені. Але лишається ще одне — динамічна висота картки. Тут мені трошки довелося подумати, але рішення виявилося настільки ж елегантним, як і простим:

.card {
  height: max-content;
}

Voila! — картки в сітці кожна має свою власну висоту!

І от коли все стало на свої місця, клацнуло як останні детальки LEGO, от тоді я й відчув ту мимолітну ейфорію, про яку писав.

Адже задоволення можна отримати не лише, якщо займатися тривалим, кхм, кодингом, а й тоді, коли вдається вирішити задачу в простий, проте елегантний спосіб, замість городити складне заради самої складности, рішення.

🔔 Тим часом розіграш квитка на DOU Day усього за 500 грн відбудеться уже сьогодні ввечері! Тож не зволікайте, аби не впустити таку нагоду!

@babichdev

.