Grid lays its children out in columns equal columns, gap apart in both directions. Like Flex it takes spacing, size and surface props and the xl to xs breakpoint objects, so the column count can change with the screen width. See the web Grid for the browser version.
Each child sits in a cell 1 / columns of the width. Cells in a row are as tall as the tallest one; give a child flex={1} to fill its cell's height.
A breakpoint object applies at and below its width, as on the web. Here the grid has four columns on a tablet, two on a phone and one on a narrow phone.
minColumnWidth fits as many columns as it can, each at least that wide, and reflows on its own. It takes a spacing token or a number of rem. A breakpoint's columns still overrides it at that width.
- React Native has no CSS grid. Grid wraps each child in a cell view, so a child's own width and gridColumn styles do not span cells.
- rows is not supported: rows follow from the content.
- direction, horizontal, vertical, center and wrap are left out, since the grid places its children itself.
- minColumnWidth takes a spacing token or rem, not CSS units such as % or calc(). It measures the grid once laid out, and counts from the screen width until then.
