Add optional CSS grid

[mdo]

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, fixes #23057, fixes #24887, 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/

[MartijnCuppens]

Not sure if it's worth it, but could we make use of custom properties for the flex grid columns, so that we could reuse them for the grid grid? This would make it easy to switch between the grids when needed.

Something like:

.row > * {
  width: calc(var(--col) / var(--columns) * 100%);
}

.grid > * {
  grid-column: auto / span var(--col);
}

// And for the columns:
.col-6 {
  --col: 6;
}

+ a fix for col-auto and col classes

[ffoodd]

@MartijnCuppens I love the idea! Very clever use of custom properties.

[mdo]

@MartijnCuppens Oh very cool idea. Downside would be columns wouldn't have a set width when used outside rows, which was meant as a big improvement coming from v4. Thoughts?

[ffoodd]

@mdo May then worth considering adding width utilities, since this was very confusing for most users to use .col-* to define a width, wasn't it?

[ffoodd]

Looks great!

[ffoodd]

Sidenote here: we may introduce contents value for our display utilities since it'd help flatten the markup in some advanced cases:

• Hidde de Vries about "More accessible markup with display: contents"
• Ire Aderinokun's "How display: contents works"

However it should be restricted to non-semantic elements at the moment because of WebKit bugs (under discussion), so just leaving this here as a note for now :)

[ffoodd]

@Chetan11-dev Well, this is really interesting however if I'm getting your point, the exact same feature already exists in our current gird, using .row-cols-* utilities.

Using grid has the real benefit of using less code, I'd say. Worth a try :)

[mdo]

@ffoodd Want to give this another review now that I've updated a few things? Biggest differences since last major iteration focus on improved documentation, grid cols/gaps/rows are inherited for nesting, and the CSS Grid is included into our docs vs generated as part of the dist CSS.

[ffoodd]

I love it! Can't wait to use this 😃

[ffoodd]

Back to the discussion, could still be paired to width utilities and contents value for display; but it's so easy now with the API that I'd say we wait for request. :)

[XhmikosR]

Wouldn't it make more sense to follow the alphabetical order here?

[sidodekker-kodision]

How is it going with building css grid for Bootstrap? With IE dead and a global browser support of 94.94% is css grid still 'experimental'? I think not. Mozilla also says it's safe to use now. What are we waiting for? :)

Is there any set date or plan yet for when css grid becomes a default part of Bootstrap?