Grid
GdsGrid is a 12-column responsive layout primitive. Use it whenever you want content to flow across columns and reflow at different screen sizes.
Two roles:
- Container - set
containerand pick aspacingvalue to define the gap between cells. - Item - set
sizeto choose how many of the 12 columns the cell occupies. Pass a number for a fixed size, or an object for a responsive size ({ xs: 12, md: 6 }= full width on mobile, half on desktop).
Usage
Responsive sizing
Pass an object to size to change the layout per breakpoint. Resize your browser to watch the grid reflow.
| Breakpoint | Min width |
|---|---|
xs | 0 |
sm | 600px |
md | 900px |
lg | 1200px |
xl | 1536px |
Auto and grow
size="auto"- the cell shrinks to fit its content.size="grow"- the cell fills whatever space is left.
Offset
offset pushes a cell to the right by N columns. Combine with size to align content within the 12-column grid.
Nested grids
A grid item can itself be a container, letting you split a region of the page into a finer sub-grid.
Props
External references
For the full and always up-to-date props, use the MUI references below.