Bootstrap: Bootstrap css grid : Replace flexbox with CSS Grid Layout?

[stevenbriscoeca]

Any plans to use css grid over flexbox for the bootstrap grid?

The support seems pretty good :
http://caniuse.com/#feat=css-grid

[Sungodragon]

I read a lot on this since I am a newbie, but I could gather that both can have a different role and can live with each other well.
So I vote support for both.

[stevenbriscoeca]

@Sungodragon I agree. I meant just the bootstrap grid. I changed the description and title to reflect that.

[mustafa-online]

The support is not that good ☹

[stevenbriscoeca]

no? Remember this is for bootstrap 4, and they only support IE11

[istratos]

Flexbox is more widely supported.
http://caniuse.com/#feat=flexbox
97% (flexbox) vs 70% (cssgrid)

Also one of the main points in bs alpha 6 was the flexbox grid overhaul. And there are a lot of components dependant of flexbox.

[Sungodragon]

@alanstratos can you elaborate 97% vs 70% part.

I checked:
It's Baidu browser and UC browsers making 18 percent of unsupported.
Only thing is to understand support for Internet Explorer 11. (although modernizr supports it in latest version)

Edit: So we just have to check the percentage of support according to what Bootstrap is supposed to support and not considering unsupported browsers.

[Kout]

Beside the declared browser support, implementing Grid Layout would mean a huge changes for the whole design system. I am afraid it can only come with BS5 and after deep rethinking the whole concept of BS grid. With the power of Grid Layout there are completly new possibilities ‒ and deciding what should be part of the framework is nothing simple.

[mdo]

Nope. Browser support isn't there and they don't explicitly serve the same function anyway.

[JustCallMeAD]

Is it worth looking at CSS Grid again now that it is supported in all major browsers including Edge? A lot of people are going to be annoyed having to learn Flexbox the CSS Grid - why not just go to Grid as it's so simple to use?

CSS Grid ships in Microsoft Edge on Oct 17, mark your calendars.
https://twitter.com/gregwhitworth/status/903616284998254595

For anyone who is not sure what CSS Grid is - I suggest you watch the video below - it's awesome:
https://www.youtube.com/watch?v=7kVeCqQCxlk

[oobug]

I created a rudimentary implementation of Bootstrap's responsive layout using CSS grid here: https://codepen.io/oobug/pen/mMgxBZ

Based on how simple this was, I think it's definitely worth looking into CSS Grid again.

[JustCallMeAD]

@oobug - wow, looks great & not much code. will have a good play with it when I get the chance.
I have just quickly added my debugger script to it & at a quick look it looks like it works well.
https://codepen.io/anon/pen/mMgGeV

[JAugustoGuimaraes]

CSS Grid is Awesome!, it is a native framework and you can use it together with Bootstrap without changes.

[kinnaj]

Maybe it could be toggled with a variable just like flexbox?

[wolfy1339]

It's too late in the development cycle to add anything major like that

[kinnaj]

fair enough :)

[tomagladiator]

Because Bootstrap 4 is Beta, we can't change the grid, nevertheless if a hero can create an extension to include css grid it will be great..., maybe we can merge with iota : http://korywakefield.com/iota/

[dijonkitchen]

Related: https://github.com/twbs/bootstrap/issues/24887#issuecomment-347215557

[coldnebo]

Yes PLEASE! I'd love to use both and hope it would make my job easier.

I like Per's article on Hackernoon The ultimate CSS battle: Grid vs Flexbox, which describes the primary difference as flexbox (content-first) and css-grid (layout-first). He illustrates good reasons to use both in different situations.

The biggest problem we have with the current grid system is when someone wants to change the layout (i.e. layout-first changes), we can't change just one tiny grid-template-column definition, we have to change hundreds of col classes on various elements in different files and get the new math right. Bootstrap's grid currently requires a lot of structural html to define grid behavior that css-grid seems to largely avoid.

For example, if I decide that col-md-3 wasn't the right choice and want to change it to col-md-2... I have to change every single element in the row, and then recheck the math. Compare that process to css-grid where I just define grid-template-columns once at the top. CSS grid seems to make it so much easier to respond to changing requirements. Especially if you are implementing lots of nested views and forms.

[geeksven-dev]

I guess it would be a real benefit for bootstrap!