@material-ui/system - Add Grid support

[techniq]

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

Similar to flexbox, it would be nice if CSS Grid properties were supported with @material-ui/system / @material-ui/core/Box like styled-system does.

Current Behavior 😯

No support for CSS Grid properties like gridTemplateColumns, rowGap, etc.

Examples 🌈

<Box display="grid" gridTemplateColumns="1fr" rowGap={8}>
  {/* children */}
</Box>

[peteruithoven]

One simple workaround is to create a custom component with custom style props. For example:

import { styled } from '@material-ui/styles';
import { style, compose } from '@material-ui/system';

export default styled('div')(
  compose(
    style({ prop: 'gridTemplateColumns' }),
    style({ prop: 'gridGap', themeKey: 'spacing' }),
    () => ({
      display: 'grid',
    })
  )
);

This way it's even possibe to use the spacing logic for gridGap, example:

<Grid
  gridGap={[2, 3]}
  gridTemplateColumns="repeat(auto-fill, minmax(13rem, 1fr))"
>
  ...
</Grid>

[cctoni]

Just do it in your styled components. To reflect every aspect and features into components would be complete insane. Use grid wise!

[techniq]

@sourcewars This is only for the Box component (and underlying @material-ui/system) which is kind of the purpose of Box -- to not have to create one-off named styled-components (or emotion, etc) unless deemed necessary. Keeps from having a bunch of one-off Container or Root named components.