CSS Grid 对比 Flexbox
不要再为 CSS 布局而苦恼了。
我以前经常花好几个小时去修复 Flexbox 导致的布局错乱。我尝试将项目排列成一行，但最后一个项目却会拉伸并占据整个屏幕。看起来很不协调。我尝试过使用 margin 和各种奇技淫巧，但都没用。
然后，我转变了思路，开始使用 CSS Grid。
区别很简单：
- Flexbox 用于一维布局。适用于单行或单列。
- CSS Grid 用于二维布局。当你需要同时控制行和列时，请使用它。
把 Flexbox 看作处理小任务的工具，把 Grid 看作构建整个页面结构的工具。
Flexbox 的陷阱： 当你用 Flexbox 做画廊（gallery）时，项目在不同屏幕尺寸下可能无法完美对齐。你经常会遇到“孤儿”项目，破坏设计的节奏感。
Grid 的解决方案： 使用 Grid，你可以用一行代码创建响应式画廊。
使用这段代码：
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
这会告诉浏览器尽可能多地填充 250px 的列。浏览器会自动为你计算。不再需要猜测，不再有错乱的行。
仪表盘示例： 使用 Flexbox 构建包含侧边栏、主内容区和页脚的仪表盘是很困难的。你通常需要嵌套容器和混乱的代码才能让页脚横跨整个宽度。
使用 Grid，你只需定义一次轨道：
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
你只需一条命令，就可以让页脚从第一列跨越到最后一列。你的代码会变得简洁且易于阅读。
我的建议：
• 在页眉或按钮中使用 Flexbox 进行简单的对齐。
• 在主页面布局和复杂的画廊中使用 Grid。
• 不要为了修复布局问题而不断嵌套容器。
• 使用 fr 单位来轻松分配空间。
今天就尝试一下。找一个你以前用 Flexbox 构建的老组件，改用 CSS Grid 重写它。你会发现代码变短了，布局也更稳固了。