Published
January 22, 2026
Make the individual rows separate grids. That way you can reduce the column count to 1 on mobile displays and see each item individually as a column of data.
You can wrap the entire table in a vertical flex, just to control between-row spacing.
To solve your label problem;
- Header row <-- show on desktop only
- Data row <-- N cols on desktop, 1 col on mobile
This gives you both layouts with minimum fuss. It's easiest if it's CMS generated, so each label only exists once, since you only define each row once.
