Layout — Grid

grid switches display: grid. Gap tokens are shared with Flex.

1

2

3

span:2

4

<div and-layout="grid cols:3 gap:sm">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div and-layout="span:2">span:2</div>
  <div>4</div>
</div>

Columns & spans

Token	Range / values	CSS property
cols:*	1 … 12	grid-template-columns: repeat(n, minmax(0, 1fr))
span:*	1 … 12, full	grid-column (full = 1 / -1)
col-start:*	1 … 13, auto	grid-column-start
col-end:*	1 … 13, auto	grid-column-end

Responsive

cols:*, span:*, col-start:*, col-end:*, and gap* all accept a @breakpoint suffix — see Overview → Responsive for the breakpoint table. The bare grid switch itself does not: there’s no grid@md, so this package can’t flip a container from flex to grid at a breakpoint on its own.

Next steps

Recipes — the responsive card grid and sidebar shell patterns build on cols/span directly.