Grid component

[rtivital]

@mantine/core should export Grid component with 12 columns flexbox grid

Exported components:

• Grid – wrapper component
• Col – column component, defines column width

Grid component props:

• gutter (defaults to md) – defines horizontal and vertical spacing between columns – xs, sm, md, lg, xl – predefined in theme.spacing, number value to set spading in px.

Col component props:

• span – number – defines (span / 12)% of space which column will take

[cstrat]

This will be great!

Assuming this will provide a responsive underlay we can use for mobile/desktop UIs.

[rtivital]

Assuming this will provide a responsive underlay we can use for mobile/desktop UIs.

That's a little bit tricky – currently I've done responsive support via useMediaQuery hook. It would be great to get some feedback before release. If you can assist that would be perfect.

To preview the feature:

• git clone https://github.com/mantinedev/mantine
• git checkout next-1.1.0
• yarn
• npm run docs
• navigate to http://localhost:7001/core/grid/

[cstrat]

I don't use SSR so for me useMediaQuery works fine.
From what I've read about responsiveness in the repo - you've had to sacrifice some capability to better support SSR, right?

[rtivital]

It's more complicated – jss has full support for media queries with some bugs, (e.g., cssinjs/jss#1320), this is the only sacrifice which I hope will be resolved in future, so ssr does not restrict anything

[rtivital]

Resolved in 1.1.0