== Background / Goal
Coming from T406628, there are certain viewport configurations and item combinations where the design is not followed at the moment.
{F66750317 width=50%}
{F66755264 width=50%}
**Viewports range causing items:**
Between ~1050 and 1190px with 3 items
**Items causing issues**
Under three items saved.
=== Requirements
We've settled on the Card internals in layout and text clamping.
- 4 Cards limit per row, even on widest desktop
- Cards should auto-fill the space whenever possible on mobile, on tablet and desktop only when there's enough Cards (2 on tablet, 3 on desktop) available
- Codex gap of 16px must not widen, no matter with `auto-fill`ed rows
- Left align Cards always for best readability, no center alignment if number of cards < available space
We have
- `22rem` (equal to 352px) as minimal Card width and
- `28rem` (equal to 448px) as max Card width, alternatively
- `34rem` (equal to 544px) as max mobile Card width
- `1fr` equal to 100% to fill up the Grid row
Sizes follow, with min / max numbers in cells, I stay in px for simplicity
| Viewports: → | 320px <= Mobile >= 639px | 640px <= Tablet >= 1119px | 1120px <= Desktop >= 1679px | 1680px <= Desktop wide >= 1680px+
| -- | -- | -- | -- | -- | --
| **Items in List:** ↓ | | | | |
| 1 | 100% / 544px | 352px / 544px | 352px / 448px | 352px / 448px
| 2 | 1-2 per row: 320px / max1fr (100%~=639px), wrapped | 22rem 2 per row | 22rem | 22rem
== Developer notes
Best user experience with use of `:has` which is slightly less supported than `display: grid`, we need both in combination.
The support difference seems negligible though, see comment below.
== Acceptance criteria for done
[] Left align in these causes instead of widening the `gap`