Grid places GridItems on a CSS grid of equal columns. Columns, gaps, spans and offsets can change with the width, following the grid’s own width or the viewport’s. The switching happens in CSS (container queries and media queries), so the layout is right on the first paint, with no measuring and no layout shift. It is layout only: it draws nothing of its own.

#Demos

#Basic

cols sets the number of columns; each item takes one by default.

#Gap

xGap and yGap take a theme gap (small, medium, large) or a number in px. There is no gap by default.

#Span and offset

span is how many columns an item takes, offset how many empty columns come before it.

#Responsive columns

A responsive value lists a value per width: "1 s:2 m:3" is 1 column, 2 from the s breakpoint and 3 from m. A width can also be px: "1 360:2 520:3". With responsive="self" (the default) the widths are the grid’s own, so the same grid works in a sidebar and in the main column; with "screen" they are the viewport’s. cols, xGap, yGap, span and offset all accept one.

#Responsive items

An item with a span of 0 is hidden, so a responsive span can drop an item from a narrow grid. Drag the corner to see it go.

#Collapsed

collapsed keeps the first collapsedRows rows of items. A last item with suffix sits at the end of the last row and stays visible; as a function child it learns whether anything is hidden, which suits an “expand” control on a filter form.

#Breakpoints

The names suit the viewport; a self-responsive grid in a panel usually wants px widths. The grid writes the container or media queries for the widths it uses into a <style> scoped to itself, since a query can’t take its width from a CSS variable.

#Props

#Grid Props

Grid renders a div (the element whose width responsive="self" measures) around the grid itself, and accepts native div attributes and a ref on that outer element. It adds no role; for a list of cards, give it role="list" and each item role="listitem".

A self-responsive grid takes its width from where it is placed, like any block; inside a shrink-to-fit parent (an inline-block, a flex item without a width), give it a width. Only a collapsed grid with responsive values measures its width in JavaScript, to know which items to hide.

#GridItem Props

Place GridItems directly inside Grid (or in a fragment): the grid reads their span and offset to work out collapsing. GridItem renders a div and accepts native div attributes and a ref.

The theme gaps are the --r-grid-gap-small, --r-grid-gap-medium and --r-grid-gap-large tokens.