Customize spacing between columns with
gutter prop on Grid component.
Use xs, sm, md, lg, xl values to set spacing from
theme.spacing or number to set spacing in px:
grow prop on Grid component to force last row take 100% of container width:
offset prop on
Grid.Col component to create gaps in grid.
offset adds left margin to target column and has the same units as
Once children columns span and offset sum exceeds
columns prop (defaults to 12),
columns are placed on next row:
Since grid is a flexbox container, you can control
Use breakpoint props (
xl) to make columns respond to viewport changes.
You can configure breakpoint values in MantineProvider.
In this example up to
md there will be 1 column, from
lg there will be 2 columns and from
lg and up, there will be 4 columns:
By default, grid uses 12 columns layout, you can change it by setting
columns prop on Grid component.
Note that in this case, columns span and offset will be calculated relative to this value.
In this example, first column takes 50% with 12 span (12/24), second and third take 25% (6/24):