Stubbing out here for fun since #31812 as opened. I’ve done some experimenting elsewhere for this, and I’m not 100% convinced we’d want to drop the existing flex box grid for a CSS grid implementation. However, I think it’s important to at least get something out there so we can react to it and try things out.
This is heavily WIP, so no need for full on code review yet, but I’m open to ideas for how we can accomplish something cool here!
Intention here is to create an optional CSS grid that can be enabled in place of the default CSS grid classes. So, to switch from the default grid to CSS grid:
$enable-grid-classes: false;
$enable-cssgrid: true;From there, we generate a .grid instead of a .row. The classes within the .grid are essentially the same by name, but that’s it. We’d use column properties as needed to accomplish this.
Fixes #19729 (closed), fixes #23057 (closed), fixes #24887 (closed), addresses #31812.
Previous demo from your's truly: https://mdo.github.io/bootstrap-css-grid-layout/
/cc @twbs/css-review
Preview: https://deploy-preview-31813--twbs-bootstrap.netlify.app/docs/5.0/layout/css-grid/