Using CSS Grid with Bootstrap? Is it time, yet?

[SamuelMiller]

I've been watching a few videos on the wonders of the newer CSS Grid layout module available in modern CSS. Boostrap, since v5.1.0, offers an opt-in experimental CSS Grid system. While I would like to start using CSS Grid in my designs, I am hesitant because mobile visitors have to use the latest versions of their browser for it to work. For example, https://caniuse.com/css-grid lists Firefox 101 (for android) as the earliest version that supports CSS Grid, and it was just released in May of this year. Unless I am willing to provide a fallback for just-out-of-date browsers, it still seems premature to use CSS grid?

Are you using CSS Grid yet in your responsive website designs for mobile devices? Or, is it still Flexbox all the way?

[SamuelMiller]

Anyone?

[mdo]

I've used it a few times, it's pretty great! Support is definitely iffy, so it depends on your own audience. It's part of the reason we've kept it as experimental and might continue to iterate on our approach with it. Honestly one of the best parts of CSS grid to me is gap support in flexbox and grid now. Browser support isn't the best for that yet (only recently added to Safari), but it continues to bridge the flex/grid boundaries :).

[SamuelMiller]

Thanks for your perspective.

[bjdevil21]

@mdo - Follow up question: We're looking at using Bootstrap again, and I think that CSS Grids is the way for us to go. A coworker of mine told me that, "Bootstrap v6 is going to be CSS Grids," but I don't see any main Grids "6.x-dev" branch or any recent commits related to any v6-* branch. Was my coworker correct, or is it still just an experimental feature and isn't the future for Bootstrap?

[julien-deramond]

@bjdevil21 The development of the v6 hasn't started yet. We have to finish fixing some issues first in a v5.3.4. Then we have some minor features to add in a v5.4, and then hopefully, we'll start the v6.

[mdo]

Your coworker is likely referring to our current CSS Grid implementation: https://getbootstrap.com/docs/5.3/layout/css-grid/. We'll be iterating on it more for v6.

[sidodekker-kodision]

Hee there,

I've been using css grids for quite some time to build websites (creating fallbacks by first building the element using display block combined with floating, or just using display flex and putting the css grid code in the @support(display:grid){} feature query). A lot of browsers started to support css grids from 2017 onwards. Now that global support is 94.94% (!), and with Internet Explorer officially dead, I think it's time to go forward and implement css grids for Bootstrap as soon as possible. What are we waiting for?

And why the opt-in for css grids? If you don't want to use css grids, you don't put the d-grid class in your html, right?

For context, and to be clear, in Bootstrap you can use layouts in 3 ways:

1. Bootstrap grid system (container-row-col)
2. Flexbox
3. CSS Grid (opt-in)

An even more radical idea: I would propose to get rid of the Bootstrap grid system entirely, from let's say Bootstrap 6, and replace the container-row-col structure with a new Bootstrap grid system based on css grids, which does this in a cleaner way.

I find the Bootstrap grid system hacky because of the use of negative margins to create the column structure. When applying margins to columns, the negative margins (of these columns) is interfered with and the layout doesn't look like what you would expect. The same goes for applying padding to containers, which already have a default padding set to them.

Concerning the choice of flexbox vs css grids, I would always keep using both, for flexbox in my view, combines perfectly well together with css grids. It's a match made in heaven for us layout perfectionists.

To see the main discussion about implementing css grids, see #31813

[hwang1588]

I think that someday, this css grid method should be supported as a regular method and two-track along with a flex method.

[y377]

When building a website with Jekyll, because of the liquid template syntax, there is a filter called {{ group_by_exp }} grouped by specific attributes, which will be used to group posts by year-month-day and create a timeline, currently I am using the row border to generate the timeline, if the PC browser looks good, but when it comes to the mobile interface, the timeline will be shifted, so I am urgently learning CSS grid, according to the answer I got from Google so far, css grid can create a timeline very well

[shahzad233]

thanks for your perspective. building website.