Grid for layout, Flexbox for components Grid 用于布局，Flexbox 用于组件

Posted 2022-03-04 Chuck Lu

https://www.ruanyifeng.com/blog/2022/03/weekly-issue-197.html

CSS 的 Grid 布局和 Flexbox 布局，作用相似，经常有人讨论，两者的适用场合是什么。作者提出，Grid 布局应该用于页面，Flexbox 布局应该用于组件。

https://ishadeed.com/article/grid-layout-flexbox-components/

My brother is a fresh computer engineering graduate and he is currently finishing his internship in front-end development. He learned about both CSS grid and flexbox, but I noticed a pattern that I see a lot on the web. He can’t decide when to use grid or flexbox. For example, he used CSS grid to layout a website header and mentioned that the process wasn’t smooth as he played with grid-column and tried to fine-tune it until it looks like the design.

To be honest, I don’t like that, and I also researched about a resource that he can use to learn the differences between grid and flexbox, with examples on both, but I couldn’t find any. I decided to write an in-depth article that covers everything about that topic. I hope you found it clear!