Flex适合一维布局内容驱动，grid是二维布局，结构驱动
image.png
核心元素
image.png
image.png
建立正确的心智模型
image.png
布局的轨道单位
image.png
image.png
image.png
image.png
最佳实践和注意事项
image.png
精确控制的必要性（也是grid布局的优势）
image.png
注意1/-1非常好的处理不知道几行几列的情况（神器）
image.png
实例展示
精细控制实例.png
span关键字
image.png
image.png
响应式布局新思路
命名网格 grid-template-area 最强大的应用场景
image.png
技术对比和选择
image.png
常见错误和预防
image.png
gap和容器级对齐
image.png
image.png
项目item的对齐方式
image.png
实际实例：
image.png
全局设置+单独覆盖
image.png
image.png
响应式布局实战
image.png
image.png
image.png
autofill和autofit的区别 响应式常用autofit
image.png
实际使用
image.png
image.png
