[Grid] Make all the props responsive

[jgoux]

Hello,

Description

Add extra flex properties on Layout

Currently, not all flex properties are supported.
I think we could benefit to have them so we don't have to touch the CSS every time when dealing with layout only components.

Missing properties : grow, shrink, basis, flow, order

Make the breakpoints properties (xs, sm, lg...) accept an object of subproperties

With the breakpoints properties, we have the control over the width of our components based on the screen resolution.
It would be totally awesome to have control over all the flex properties based on the resolution.
To do that, we could make the breakpoints properties accept an object of subproperties like this :

<Grid spacing={{ sm: 2, md: 4 }} alignItems={['center', 'flex-end']}>
{/*...*/}
</Grid>

Images & references

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout

[esseswann]

I made a component of similar behavior, we could use either the package itself underneath Layout or just implement something alike.

[oliviertassinari]

@jgoux thanks for opening that issue. I'm gonna try to answer your question regarding the Layout API choices.

1. Why not using a fraction? For instance grid-styled:

<Grid
  xs={1/2}
  sm={1/3}
  md={1/4}
  lg={1/6}
/>

The API allows to simply know how much space is available and how much columns we are going to have. However, UI/UX designers often use a 12 columns layout model. At least the specification, bootstrap and my coworkers do. They give us column constraints, not percentages.

2. Why not grouping the breakpoints by property? For instance styled-components-grid:

<Grid>
  <Grid.Unit width={1/6}>Awesome!</Grid.Unit>
  <Grid.Unit width={1/3}>Amazing!</Grid.Unit>
  <Grid.Unit width={{mobile: 1, tablet: 1/2, desktop: 1/4}}>Out of this world!</Grid.Unit>
</Grid>

I don't think that it's the best API choice as we most of the time ask ourselves. How is the component is going to render given a screen size? Not the other way around. What's that property is going to be?

3. Why having a single <Layout /> component and not a <Container /> and <Item /> one?
   Simply because a layout can be a container and an item at the same time. We have a stress test in the visual regression for that. That's an advanced mode.

Add extra flex properties on Layout

4. I 💯 agree with that. The challenge in around not making the injected CSS into the page grows too much. I'm not sure where is the limit, so we could start adding all of them. Alternatives are using dynamic inline style (but needs to be prefixed) or dynamic CSS injection.

It would be totally awesome to have control over all the flex properties based on the resolution.

5. I agree with that point but I not sold on the nesting. What's wrong with?

<Grid
  xs={12}
  xsGrow={1}
  xsDirection={column}
  lg={6}
>
  {/*...*/}
</Grid>