Grid component based on div element
The Grid component is based on the div element and supports common margin props.
Radix Primitives · all subjects
grid
8 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Grid basic usage example
Example of a basic grid with 3 columns, gap of 3, and 2 rows of 64px height: ```jsx <Grid columns="3" gap="3" rows="repeat(2, 64px)" width="auto"> <DecorativeBox /> <DecorativeBox /> <DecorativeBox /> <DecorativeBox /> <DecorativeBox /> <DecorativeBox /> </Grid> ```
Grid columns prop is responsive
The columns prop accepts a breakpoint object for responsive grid layouts. For example, using columns={{ initial: "1", md: "2" }} creates a grid that starts with 1 column and uses 2 columns from the medium breakpoint.
Grid rows prop is responsive
The rows prop is marked as Responsive and accepts a breakpoint object, allowing grid row definitions to change at different breakpoints.
Grid responsive example
Example of a responsive grid that uses 1 column initially and 2 columns from the medium breakpoint: ```jsx <Grid columns={{ initial: "1", md: "2" }} gap="3" width="auto"> <Box height="64px"> <DecorativeBox /> </Box> <Box height="64px"> <DecorativeBox /> </Box> </Grid> ```
Grid shared props with other layout components
Grid shares layout props with Box, Flex, Container, and Section components. These shared props are documented in the Layout overview.
Grid children props control grid container behavior
Each layout component has props used to control the style when it is a child of a grid container: gridArea, gridColumn, gridColumnStart, gridColumnEnd, gridRow, gridRowStart, and gridRowEnd. These accept CSS grid values and support responsive values like gridColumnEnd={{ initial: "-1", md: "3", lg: "auto" }}.
Radix Themes 3.1.2 Grid areas prop and gridArea prop
Radix Themes version 3.1.2 added an `areas` prop to the Grid component and a `gridArea` prop to all layout components: Box, Container, Flex, Grid, and Section.