3 ms·
I find it mildly amusing that until advent of this cutting edge subgrid feature it wasn't possible to get simple "table-like" cards with matching "header - body
by myfonj 7y ago
I find it mildly amusing that until advent of this cutting edge subgrid feature it wasn't possible to get simple "table-like" cards with matching "header - body - footer" of dynamic heights:
+---+ +---+ +---+
|1H | |4H | |7H |
| H | | | | |
+---+ +---+ +---+
|2B | |5B | |8B |
| | | B | | |
+---+ +---+ +---+
|3F | |6F | |9F |
| | | | | F |
+---+ +---+ +---+
To get this you had to either compromise semantics (use [1,4,7],[2,5,8],… table) or resort to JavaScript (read computed dimensions, find tallest and unify rest).
Graphic designers use this pattern very often. Finally coders will not have to worry about it anymore, soon. After 22 years of CSS.
- feb3_nob 7y agoAbsolutely! This case hit very close to home with me. I remember once trying for an entire long weekend to solve it with flex/grid to no avail; only to be disappointed at having to use JS for such a 'trivial' task. This made me super happy!
- GordonS 7y agoTo be more specific, the article doesn't say this isn't possible with CSS, but that it isn't possible with nested grids. Which, of course, doesn't mean it's easy or even sane to implement in CSS...
- myfonj 7y agoFor variable amount of "cards" that could eventually wrap this really is not possible to do in pure CSS without subgrid, as sibling comment confirmed. It is possible for fixed amount of cards: simple grid with named areas; it is possible for variable amount of cards when at least two of its components (e.g. header and footer) have fixed height: flex (or grid). Once you have to match more than one variable dimension across two axis (headers/bodies/footers laid in vertical axis matching their "siblings" in horizontal axis in our example) you need either JavaScript, broken semantics or subgrid. This is -- as I understand it -- raison d'etre of CSS Grid Level 2.
- GordonS 7y agoWell, I'll take your word on it. There's zero chance I'm going to spend the next 4 years battling with CSS in an attempt to prove otherwise ;)