== 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
- `20rem` (equal to `320px`) as minimal Card width [was ~~`22rem` (equal to `352px`)~~ in earlier iteration, but iPhone's 375px viewport needed us to reduce slightly] 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.
== QA notes
Given the selector behavior of `:has` featuring selectors, please ensure that you delete items from DOM and don't rely on `display:none` to test 1, 2, or 3 items. Instead duplicate an item/a card or delete/remove it with DOM inspector. Otherwise the rendering would mislead and not represent real rendering.
== Acceptance criteria for done
[] Left align in these causes instead of widening the `gap`