CSS 布局一直是前端开发的难点之一。但随着 Flexbox 和 Grid 的普及，布局已经不再是让人头疼的问题。
Flexbox 适合一维布局（行或列），而 Grid 适合二维布局（行和列同时）。理解这一点，你就能在正确的场景选择正确的工具。
Flexbox 的关键在于理解容器和项目的关系。通过 display: flex 激活 Flexbox 后，可以使用 justify-content 和 align-items 控制对齐。
Grid 则更加强大。通过 grid-template-columns 和 grid-template-rows，你可以定义复杂的网格布局。
一个实用的技巧是使用 repeat() 和 minmax() 函数。例如，repeat(auto-fill, minmax(300px, 1fr)) 可以创建响应式的网格布局，无需媒体查询。
现代 CSS 布局让响应式设计变得简单。合理组合使用 Flexbox 和 Grid，你可以实现任何复杂的布局需求。