Grid
The responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts. It uses CSS Flexbox for high flexibility and provides a 12-column system with customizable breakpoints.
The Grid component works well for layouts with a known number of columns. The columns can be configured with multiple breakpoints to specify the column span of each child. It uses CSS Flexbox rather than CSS Grid for high flexibility and is always a flex item.
Basic Grid
To create a grid layout, you need a container. Use the container prop to create a grid container that wraps the grid items. Column widths are integer values between 1 and 12.
Responsive Breakpoints
Items may have multiple widths defined, causing the layout to change at defined breakpoints. Width values apply to all wider breakpoints, and larger breakpoints override those given to smaller breakpoints.
Spacing
Use the spacing prop to control the space between children. The spacing value can be any positive number or string, converted using the theme spacing helper.
Auto Layout
The auto-layout feature gives equal space to all items. When you set the width of one item, others automatically resize. Use "grow" for flexible sizing and "auto" for content-based sizing.
Offset
The offset prop pushes an item to the right side of the grid. It accepts numbers for specific column offsets or "auto" to push items to the far right.
