Tiles Layout
ProResponsive CSS Grid container for arbitrary tiles — auto-fill or fixed columns, configurable gap and minimum column width, an optional uniform aspect ratio and masonry progressive enhancement.
Complexity tier: Primitive Presents a value: held to semantic markup and contrast, with its right-to-left and print gaps recorded and the right-to-left debt allowed only to shrink.
import { SvTilesComponent } from '@styloviz-pro/display';Demo & usage
Basic usage
ProUsage example — open the gallery for the full interactive demo.
An interactive demo for this component lives in the gallery.
Open live demoMore examples
Fixed columns
ProUniform square tiles
ProMasonry
ProWhat masonry does to reading order — and whether you even got it
ProMasonry does not reorder anything: the markup, the tab order and the screen-reader order are already correct, and it is the VISUAL order that diverges. No amount of ARIA fixes that, because there is nothing wrong for ARIA to describe. Grid masonry is the harsher case of the two — CSS multi-column at least has a describable mapping (column one holds 1, 2, 3; the first visual row is 1, 4, 7), whereas grid masonry puts each item in the shortest track, so where item N lands depends on the heights of items 1…N−1 and the mapping cannot be stated at all. Which is why the answer is to point at the plain grid rather than to describe the divergence. The second thing the note can tell you is for you, not the reader: grid-template-rows: masonry ships almost nowhere, so [masonry]="true" usually produces an ordinary grid — silently, until now.
When to use
- Laying out a gallery, dashboard or bento grid of arbitrary tile content.
- You want auto-fitting columns or a fixed count without hand-writing grid CSS.
- For a data-bound list of cards, render them inside the tiles container.
Async states
None — this component has nothing to load, so it has no loading, empty or error state to drive.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| columns | number | 'auto' | 'auto' | Fixed column count or 'auto' for auto-fit. |
| minColumnWidth | number | 200 | Min column width when using auto. |
| gap | number | 16 | Gap between tiles in px. |
| aspect | string | '' | Optional CSS aspect-ratio value for tile wrappers (e.g. '1/1', '16/9'). |
| masonry | boolean | false | Enable masonry layout (CSS grid masonry — progressive enhancement). |
| showLayoutNote | boolean | true | Show the reading-order note when masonry is actually in force. |
| ariaLabel | string | '' | Accessible label for the grid region. When set, the grid also exposes an ARIA role (`role`, default `group`) so assistive tech announces it. |
| role | string | 'group' | ARIA role for the grid element, applied only when `ariaLabel` is set. `group` is valid around any content; use `list` for a collection a screen reader should count, and mark every tile `role="listitem"`. |
Customization & theming
- Switch between auto-fill and a fixed `columns` count; tune `gap` and `minColumnWidth`.
- Apply a uniform `aspect` ratio to every tile via one input.
- Opt into CSS `masonry` where the browser supports it — `masonryState()` reports `off`, `applied` or `unsupported`, and the grid publishes it as `data-sv-masonry`.
- `showLayoutNote` suppresses the reading-order note for a tile set whose order carries no meaning.
Best practices
- Do: Use auto-fill (`minColumnWidth`) for responsive galleries and a fixed `columns` for deliberate layouts.
- Do: Set `aspect` once for uniform tiles instead of an aspect class on every child.
- Tip: Masonry is a progressive enhancement — verify the fallback grid still reads well where it is unsupported. The component now tells you which of the two you are looking at rather than leaving you to guess.
- Do: Reach for the plain grid wherever the order of the tiles carries meaning — a ranking, a sequence, a set of steps. Masonry's visual order is a function of tile heights, so it is not something you can design around.
- Don't: Don't set `showLayoutNote` to false because the note is inconvenient. Turn it off when the order genuinely does not matter, or when you have said the same thing yourself nearby.
Accessibility
- Unlabelled, it is a presentational layout container with no role. Give it `ariaLabel` and it becomes a named `group`, which is valid around any content; set `role="list"` only when every tile is `role="listitem"` — dev mode names the first tile that is not.
- Reading order follows DOM order; keep tiles in a logical sequence for screen readers.
- When masonry is genuinely in force, the divergence between reading order and visual order is **stated** rather than papered over: the markup is already correct, so there is nothing for ARIA to fix, and the note points at the plain grid for cases where order matters.
- The note never claims a divergence that is not happening — in a browser that drops the property it says the opposite, that reading order and visual order agree.
- Give interactive tiles their own roles, names and focus states.
Feedback on Tiles Layout
Spotted a gap in this page, or something that didn't work as described? Comments are GitHub Discussions in the public styloviz/community repo, so posting needs a GitHub account.