Mesh
Mesh is a grid-based system for arranging content. It's great for cards.
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.
Cell one.
Cell two.
Cell three.
Cell four.
Cell five.
Cell six.
<ca-mesh>
<p>Cell one.</p>
<p>Cell two.</p>
<p>Cell three.</p>
<p>Cell four.</p>
<p>Cell five.</p>
<p>Cell six.</p>
</ca-mesh>
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.
Cell one.
Cell two.
Cell three.
Cell four.
Cell five.
Cell six.
<ca-mesh max-columns="3">
<p>Cell one.</p>
<p>Cell two.</p>
<p>Cell three.</p>
<p>Cell four.</p>
<p>Cell five.</p>
<p>Cell six.</p>
</ca-mesh>
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.
Cell one.
Cell two.
Cell three.
Cell four.
Cell five.
Cell six.
<ca-mesh min-columns="2">
<p>Cell one.</p>
<p>Cell two.</p>
<p>Cell three.</p>
<p>Cell four.</p>
<p>Cell five.</p>
<p>Cell six.</p>
</ca-mesh>
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 one.
Cell two.
Cell three.
Cell four.
Cell five.
Cell six.
<ca-mesh min-columns="2" max-columns="3">
<p>Cell one.</p>
<p>Cell two.</p>
<p>Cell three.</p>
<p>Cell four.</p>
<p>Cell five.</p>
<p>Cell six.</p>
</ca-mesh>
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.
Cell one.
Cell two.
Cell three.
Cell four.
Cell five.
Cell six.
<ca-mesh max-columns="3">
<p>Cell one.</p>
<p>Cell two.</p>
<p>Cell three.</p>
<p>Cell four.</p>
<p>Cell five.</p>
<p>Cell six.</p>
</ca-mesh>
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.
Cell one.
Cell two.
Cell three.
Cell four.
Cell five.
Cell six.
<ca-mesh min-columns="2">
<p>Cell one.</p>
<p>Cell two.</p>
<p>Cell three.</p>
<p>Cell four.</p>
<p>Cell five.</p>
<p>Cell six.</p>
</ca-mesh>
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 one.
Cell two.
Cell three.
Cell four.
Cell five.
Cell six.
<ca-mesh min-columns="2" max-columns="3">
<p>Cell one.</p>
<p>Cell two.</p>
<p>Cell three.</p>
<p>Cell four.</p>
<p>Cell five.</p>
<p>Cell six.</p>
</ca-mesh>
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 one.
Cell two.
Cell three.
Cell four.
Cell five.
Cell six.
<ca-mesh style="--cell-width: 48ch">
<p>Cell one.</p>
<p>Cell two.</p>
<p>Cell three.</p>
<p>Cell four.</p>
<p>Cell five.</p>
<p>Cell six.</p>
</ca-mesh>
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 one.
Cell two.
Cell three.
Cell four.
Cell five.
Cell six.
<ca-mesh cell-size="large">
<p>Cell one.</p>
<p>Cell two.</p>
<p>Cell three.</p>
<p>Cell four.</p>
<p>Cell five.</p>
<p>Cell six.</p>
</ca-mesh>
Cell width and gap override
Gaps can also be modified.
Cell one.
Cell two.
Cell three.
Cell four.
Cell five.
Cell six.
Cell one.
Cell two.
Cell three.
Cell four.
Cell five.
Cell six.
<ca-mesh style="--cell-width: 20ch; --gap-x: 2rem">
<p>Cell one.</p>
<p>Cell two.</p>
<p>Cell three.</p>
<p>Cell four.</p>
<p>Cell five.</p>
<p>Cell six.</p>
</ca-mesh>
Grid flow with auto-fit (default)
Fill excess width.
Cell one.
Cell two.
Cell three.
Cell one.
Cell two.
Cell three.
<ca-mesh flow="fit" style="--cell-width: 15ch">
<p>Cell one.</p>
<p>Cell two.</p>
<p>Cell three.</p>
</ca-mesh>
Grid flow with auto-fill
Don't fill excess width.
Cell one.
Cell two.
Cell three.
Cell one.
Cell two.
Cell three.
<ca-mesh flow="fill" style="--cell-width: 15ch">
<p>Cell one.</p>
<p>Cell two.</p>
<p>Cell three.</p>
</ca-mesh>