feat(layout-gap): use CSS gap instead of child margins (#43)

[DuncanFaulkner]

Summary

Fixes #43 — fxLayout="row wrap" + fxLayoutGap rendering inconsistencies.

fxLayoutGap previously applied margin to each child except the last. This caused two bugs the reporter documented:

1. No spacing between wrapped rows (gap only applied along the main axis).
2. Extra leading margin on the last/short wrapped row.

This PR switches fxLayoutGap to set the native CSS gap property on the flex container itself. gap spaces items both within a row/column and between wrapped rows, which fixes both issues. It's also direction-agnostic, so RTL and reversed flows need no special casing.

Changes

• layout-gap.ts — LayoutGapStyleBuilder.buildStyles now returns { gap } applied to the host. Removed the MutationObserver, child querying/sorting, layout-direction tracking, and the grid negative-margin/padding machinery (buildGridMargin/buildGridPadding/getMarginType/buildGapCSS/CLEAR_MARGIN_CSS). BaseDirective2's default update path applies the gap. Net −820 lines.
  • One value → gap: X (row + column). Two values → CSS gap shorthand <row-gap> <column-gap>.
  • Multiplier and default unit applied per token.
• layout-gap.spec.ts — replaced the margin/child-based suite with a focused suite asserting gap on the container (static values, multiplier, default unit, two-value, responsive activate/clear, RTL no-op, legacy grid suffix).
• fxLayoutGap-API.md — documented the new behavior and the breaking change.

Breaking change

fxLayoutGap now emits CSS gap on the container rather than margin on children, so the element must be a flex container (apply fxLayout) for the gap to take effect. The legacy " grid" suffix (e.g. fxLayoutGap="10px grid") is still accepted but is now equivalent to a plain gap, since gap already handles wrapped rows.

Verification

• ng test @ngbracket/ngx-layout — 464 tests pass (incl. rewritten layout-gap suite; flex/layout-align/show-hide/grid specs that interact via the layout-gap marshaller key still pass)
• ng build @ngbracket/ngx-layout — builds clean

cc @Alexi996 — this implements the CSS gap approach you proposed.

🤖 Generated with Claude Code

[DuncanFaulkner]

Runtime verification — Layout Gap demo ✅

Ran the built updated-demo (served with SPA fallback) and drove headless Chrome to /layout/layout-gap.

Verdict: PASS — the page renders a 4-per-row wrapping grid (A B C D / E F G) with visible spacing between items and between the wrapped rows, and the last row starts flush-left (no extra leading margin). These are exactly the two symptoms reported in #43.

Confirmed the mechanism from the live DOM, not just pixels:

• The fxLayoutGap container has inline gap: 10px; display: flex; flex-flow: wrap — and there are zero margin-inline/margin-block styles anywhere. The old per-child margin path is gone.
• Children carry flex: 1 1 calc(25% - 7.5px), which is what keeps four per row across the 10px column gaps.

Note (pre-existing, not a regression): the last-row tiles render wider because fxFlex defaults to flex-grow: 1; the previous grid-mode demo behaved identically. Out of scope for the gap change.

_{Screenshot hosted on the throwaway pr-110-verification branch; safe to delete after review.}