feat(grid): add CSS Grid Experiment

[joshblack]

This is currently a draft / WIP Pull Request to see what we could pull off with CSS Grid in terms of grid primitives, subgrid support, and layouts.

[netlify]

Deploy preview for carbon-elements ready!

Built with commit 0d28a80

https://deploy-preview-7851--carbon-elements.netlify.app

[netlify]

Deploy preview for carbon-elements ready!

Built with commit 89fc252

https://deploy-preview-7851--carbon-elements.netlify.app

[netlify]

Deploy preview for carbon-components-react ready!

Built with commit 0d28a80

https://deploy-preview-7851--carbon-components-react.netlify.app

[joshblack]

@alisonjoseph @tay1orjones thought you all might be interested in this, in particular:

• Example page
• CSS Grid styles

I think the notable exception is that, since we use column-gap we can't support the narrow grid mode. We can however drop all the gutter and offer classes that add back in the missing gutter from the custom property.

[netlify]

Deploy preview for carbon-components-react ready!

Built without sensitive environment variables with commit 89fc252

https://deploy-preview-7851--carbon-components-react.netlify.app

[tay1orjones]

This is awesome! 🎉 After taking a look, could we alternatively keep the wide mode/normal gutter but incorporate a narrow grid mode modifier that applies a negative margin to each child? In addition we could allow this at the per-column level to allow mixing of modes.

.bx--css-grid--narrow > *,
.bx--col-narrow {
    margin-left: calc(var(--cds-grid-gutter)/2*-1);
}

In both cases the gutter to the right of the column would remain unaffected per the spec. It would be an intentional violation of the css grid and would be visible in the grid mode explorer overlay in dev tools (see span 2 below), but it would conform to the design spec.

[tay1orjones]

I added the following here:

• Direct support for narrow mode with the "hang by default" negative left margin.
• 12 column grid modifier/helper class
• Proper support for mixing modes via subgrid
  • Condensed subgrid has proper gutters when placed in a wide or narrow parent grid
  • Narrow subgrid has proper gutters when placed in a wide or condensed parent grid
  • Wide subgrid has proper gutters when placed in a narrow or condensed parent grid
• Additional simple layout exploration/examples on /layouts page

[tay1orjones]

I also just added row-gap to the condensed grid so that consistent vertical guttering is applied when columns wrap as referenced in #4555

[joshblack]

@andreancardona @jnm2377 let me know if you have any questions!

[andreancardona]

@tay1orjones Do we care at all about mobile? Span 1's are getting cut off a bit

[tay1orjones]

@andreancardona great catch, thanks! I just pushed up a fix.