Grid
Max six columns (default)
Expand your window to see how the grid reflows.
Cell one.
Cell two.
Cell three.
Cell four.
Cell five.
Cell six.
Max three columns
This grid will not exceed three columns. But it will still flow within that constraint.
Cell one.
Cell two.
Cell three.
Cell four.
Cell five.
Cell six.
Same three-column grid with div
This is the same grid as above, but using div.grid instead of <ca-grid>.
Both TAC-based custom element and fallback div-based styles can be supported.
Cell one.
Cell two.
Cell three.
Cell four.
Cell five.
Cell six.
Minimum two columns
This grid will maintain a minimum of two columns, even on mobile.
Cell one.
Cell two.
Cell three.
Cell four.
Cell five.
Cell six.
Min two columns, max three columns
We can mix and match min and max columns. Everything should flow within the given limits.
Cell one.
Cell two.
Cell three.
Cell four.
Cell five.
Cell six.
Cell width override
CSS vars can be overriden to increase the size of the grid cells.
Cell one.
Cell two.
Cell three.
Cell four.
Cell five.
Cell six.
Cell width override with shortcut
We can create convenient attributes, like cell-size="large" for applying popular cell sizes.
Cell one.
Cell two.
Cell three.
Cell four.
Cell five.
Cell six.
Cell width and gap override
Gaps can also be modified.
Cell one.
Cell two.
Cell three.
Cell four.
Cell five.
Cell six.
Grid flow with auto-fit (default)
Fill excess width.
Cell one.
Cell two.
Cell three.
Grid flow with auto-fill
Don't fill excess width.
Cell one.
Cell two.
Cell three.