Flexbox or CSS Grid

[r_tist]

I knew I needed to get on board with one of these. Watched a YouTube vid and, without a doubt, it convinced me CSS Grid was the way to go for quite logical reasons. ...This way, I could also avoid learning Bootstrap 4 in addition to working with Flexbox.

Then I found out that CSS Grid is really not fully compatible with older browsers. I think it will be quite a while till the end-users with the older browsers catch up.

Knowing that, do you agree Flexbox & BS 4 is the way forward for now in terms of learning something new?

What are your thoughts on this topic?

[Paul-M]

I'm still using flexbox - some on here will tell you to go with CSS Grid as its the future. I personally think you need a decent fallback for CSS Grid unless you want to alientate a decent number of users. I've seen some CSS Grid solutions with a Flexbox fallback and it makes me think what is the point right now, might as well keep with flex for a bit longer.

[pziecina]

Flexbox and css grid layouts have become on-going topics for discussion for about 5-6 years in these forums, and like everything else which you use and when is a decission only you can make.

flexbox is well established, (even back to the iPhone 2 / iPad1, and Android 2.4 had support). Grids however has the opposite problem, in that it was iOS 10 before mobile devices could use them, (IE10+ has support).

It is now however not an either/or choice of what you learn, as both have become a necessity for developers to learn.

[Paul-M]

This might be helpful as a reference. I don't call something a neccessity when it can potentially be unsupported or only partially suported by about 1 in 20 users.  If you haven't the expertise or time to spend maximising compatability, building in fallbacks and learning CSS Grid go with the tried and tested Flex for now. Its a business decision.

If you surveyed any business and asked them for the forwarding thinking, better option but potentially not fully compatible with 1 in 20 users devices/browsers or a tried and tested with very high % percentage compatability they would go for the latter purely based on a business decision.

If you surveyed enthusiatic web developers they'd  be all over CSS Grid, because its a more flexible tool. Search Google for flex vs css grid, there are tons of articles, read up, debate the pros and cons for yourself, your website and your business and make a logical decision for yourself.

[r_tist]

Thanks, yes. I was excited about the CSS Grid and felt I finally made a good decision. But, after speaking with another developer about the lack of browser support I now think might as well dive in fully to Flexbox. As much as I like technology moving forward, it's more important to support a broader audience of users. It's about 'them' not me. I certainly do not have time to dive into fallbacks either. Flexbox for now.

[osgood_]

CSS Grid is good to go in my opinion, it has 94% global browser coverage - how much more do you want until making the decision? Those who stuck with Bootstrap were 2 years behind the curve in regards to Flex and will be again in regards to CSS Grid. Just my thoughts, other opinions are available.

In November 2017 global CSS Grid usage was at 75%, so in 2 years that has grown by 20%........in another 8-12months global usage will be at 98%, still not enough?

By the time you fully understand css grid there will be zero excuse not to be using it.....so better start learning asap.

Flex usage globally is 99% as opposed to Grid right now at 94% BUT developers were deploying Flex way before it reached 99%

[r_tist]

I checked analytics from June 1st to present, and would you believe the bulk of the users who do use IE 7, 8 & 9 are in the U.S. - Even countries you would not expect are up & running with version 11. I found this interesting.

[BenPleysier]

If those stats are indicative of your users, then you should start with developing a site at the lowest common denominator, namely an old fashioned browser on a mobile device.

After that, you can add more modern features like Flexbox and CSS Grids. This way you can be assured that the old browsers will see an untamed mobile version.

[osgood_]

I guess you have to decide what percentage of your users they are and make a decision based on that percentage. I dont know any web-developer that would suggest actively supporting IE 7, 8 and 9 these days. Even Bootstrap 4 doesn't support those browsers.

[pziecina]

IE 7, 8, and 9 have one good thing going for them, which is they support the use of IECCs. That means the you only require to create a seperate stylesheet for layout for those browsers, and include that in an IECC just below your main stylesheet(s). If you are using a mobile first stratergy, then dont't forget to include any 'other' styles that are not for layout in that stylesheet. Otherwise IE7,8 will not see them.

[john_stephanites]

Flebox and CSS Grid go hand in hand at least for the time being. I learned Flex then Grid and use them both. Not a very hard thing to do it is actually very simple once you get your mind around how it actually works. It reduces your CSS by quite a bit.

[osgood_]

Excellent choice john_stephanites