A component for creating grid layouts.
Use these props to create grid layouts.
The following props are shared between Box, Container, Flex, Grid, and Section layout components.
This component is based on the div element and also supports common margin props m, mx, my, ml, mr, mt, mb. View source
Use the columns prop to set the number of columns in a grid. You can change this across breakpoints using the object syntax.
The columns prop creates equally sized columns. If you need to fine-tune the column sizes, use an inline style prop.
Use the flow prop to control how the auto-placed items flow in the grid. You can change this across breakpoints using the object syntax.
Use the align prop to set the vertical alignment of the grid items. Use the justify prop to control how space is distributed between items horizontally.
You can change the values across breakpoints using the object syntax.
We do not plan to implement props for align-self and justify-self. UI code tends to be easier to understand and debug when parent components control the layout. Nesting Flex elements is the way to go when you need different alignment within one container.