Thank you for sharing. And I 100% agree that CSS Grid is more beneficial in building large layouts. 😊
I will definitely try to use CSS Grid in my future projects.
Of course it misses a lot, it's a 5 item list, it's not trying to cover everything.
Grid isn't a 1 for 1 replacement for flexbox, plenty of situations where flex is 100% the way to go. every-layout.dev/layouts/sidebar/ ← Something like this actually just can't be done with grid. Container queries will change that, but for the time being you've still gotta reach for flex box.
Enjoyed the article thank you! For number 5, I think you forgot to mention the value for the box-sizing property:
* { box-sizing: border-box; }
It really should have been the default value! The current default content-box is definitely more confusing and only very occasionally what you actually want.
Thank you for your valuable suggestion, really appreciate it!!
I will definitely add { box-sizing: border-box; } ,
thank you for pointing it out 😊 and totally agree with the content-box problem.
Matthew Morete, maybe I got misunderstood, but I actually meant that CSS Grid is good to use instead of flex, but not for everything. In fact, it's recommended to use a combination of both. Where each of them fits better. The main point is to not ignore the CSS grid completely.
You miss a lot. CSS grid min/max/fit content, etc. I recommend using it for building large layouts instead of flex.
Thank you for sharing. And I 100% agree that CSS Grid is more beneficial in building large layouts. 😊
I will definitely try to use CSS Grid in my future projects.
Of course it misses a lot, it's a 5 item list, it's not trying to cover everything.
Grid isn't a 1 for 1 replacement for flexbox, plenty of situations where flex is 100% the way to go.
every-layout.dev/layouts/sidebar/ ← Something like this actually just can't be done with grid. Container queries will change that, but for the time being you've still gotta reach for flex box.
Enjoyed the article thank you! For number 5, I think you forgot to mention the value for the box-sizing property:
* { box-sizing: border-box; }It really should have been the default value! The current default
content-boxis definitely more confusing and only very occasionally what you actually want.Thank you for your valuable suggestion, really appreciate it!!
I will definitely add
{ box-sizing: border-box; },thank you for pointing it out 😊 and totally agree with the
content-boxproblem.Matthew Morete, maybe I got misunderstood, but I actually meant that CSS Grid is good to use instead of flex, but not for everything. In fact, it's recommended to use a combination of both. Where each of them fits better. The main point is to not ignore the CSS grid completely.
Why not combine both?
Combine both? Could you give an example?
To get an idea... gist.github.com/ThomasJunk/ce4122e...
Got it! Thanks for sharing:)