Our great sponsors
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
For Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/ is the resource I would recommend, along with https://flexboxfroggy.com/ for a more interactive tutorial.
For CSS Grid, the equivalent resources would be https://css-tricks.com/snippets/css/complete-guide-grid/ and https://cssgridgarden.com/
These are all tutorial-level documentation. Once you've gone through those you can complement them with MDN as a reference.
For Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/ is the resource I would recommend, along with https://flexboxfroggy.com/ for a more interactive tutorial.
For CSS Grid, the equivalent resources would be https://css-tricks.com/snippets/css/complete-guide-grid/ and https://cssgridgarden.com/
These are all tutorial-level documentation. Once you've gone through those you can complement them with MDN as a reference.
CSS is grid is newer than Flexbox and has lower browser support, caniuse says 99.74% vs 96.95%. Overtime I imagine we'll see more utilization though
Grid usage: https://caniuse.com/?search=css%20grid
I think its a reality that by and large most developers are coupled to some CSS / Component framework that they aren't writing all the CSS from scratch, and most of these frameworks only (currently, when I last surveyed, say ~3 months ago) provide Flex based CSS utilities. Until recently this was particularly true of Bootstrap and Zurb Foundation which were arguably the most popular of the CSS frameworks.
I also think its general knowledge. Took a really long time for everyone to use Flexbox too. Even as late as 2016/2017 I saw engineers still reach for things like unsemantic[0] (the 960 Grid successor) and other utilities like it if they were doing custom layouts.
[0]: https://unsemantic.com/