Gap engine — verification

The row engine now uses a real gap, with each column subtracting its own share of the gutter (P% − gap × (1−P)). These are the cases that decide whether it is correct. Amber = real empty space.

1 · Cards actually separate

The whole reason for the change. Backgrounds and borders on the column itself now read as distinct cards.

Expect: three separated cards with clear space between them
Card onereal gap, not padding
Card tworeal gap, not padding
Card threereal gap, not padding

2 · col-1-1 claims its own line  (regression test)

The zero-basis prototype failed this — two full-width columns sat side by side. This is the most common Contao article shape, so it must stack.

Expect: two stacked full-width bars, one above the other
col-1-1 — first, full width
col-1-1 — second, on its own line

3 · Six thirds wrap to two lines  (regression test)

The prototype crammed all six onto one line at 166px each. Natural flex-wrap must survive.

Expect: 3 + 3 across two lines, with vertical gap between the lines
1
2
3
4
5
6

4 · Five quarters wrap 4 + 1  (regression test)

Expect: four across, then one alone on a second line (not five crammed on one)
1
2
3
4
5

5 · Under-filled row stays ragged  (regression test)

Two thirds should occupy two thirds and leave the last third empty — not stretch to fill it. The prototype stretched them.

Expect: two columns covering ~2/3, with visible amber empty space on the right
col-1-3
col-1-3

6 · Mixed ratios keep their proportions

Expect: 75/25 and 66/33 with a real gap, proportions visibly correct
col-3-4 — 75%
col-1-4 — 25%
col-2-3 — 66%
col-1-3 — 33%

7 · Gap utilities still work

Expect: the first row tight (16px), the second generous (60px)
gap-16
gap-16
gap-16
gap-60
gap-60
gap-60

8 · Responsive — narrow the window

Below 992px: equal fractions stack, mixed pairs equalize to 50/50, four-up goes 2-up. Below 600px everything stacks.

col-3-4
col-1-4
1
2
3
4