前言
flex布局大家应该已经运用的炉火纯青了，相信在日常开发中大家和我一样不管遇到什么都是flex一把搜哈。直到我遇到grid，才发现有些场景下，不是说flex实现不了而是使用grid能够更加轻松的完成任务。下面拿几个场景和大家分享一下。
宫格类的布局
比如我要实现一个布局，最外层元素的宽度是1000px，高度自适应。子元素宽度为300px，一行展示3个，从左到右排列。其中最左边与最右边的元素需要紧挨父元素的左右边框。如下图所示：
使用flex实现
这个页面布局在日常开发中非常常见，考虑下使用flex布局如何实现，横向排列元素，固定宽度300，wrap设置换行显示，设置双端对齐。看起来很简单，来实现一下。
1
2
3
4
5
6
7
8
实现之后发现了问题，由于我们设置了双端对齐导致，当最后一行的个数不足三个时，页面展示的效果和我们预期的效果有出入。使用flex实现这个效果就要对这个问题进行额外的处理。
处理的方式有很多种，最常见的处理方式是在元素后面添加空元素，使其成为3的倍数即可。其实这里添加空元素的个数没有限制，因为空元素不会展示到页面上，即使添加100个空元素用户也是感知不到的。
使用grid实现
面对这种布局使用grid是非常方便的，设置3列，每列300px，剩下的元素让它自己往下排即可。几行代码轻松实现该效果，不需要flex那样额外的处理。
1
2
3
4
5
6
7
8
实现后台管理布局
这种后台管理的布局，使用flex实现当然也没有问题。首先需要纵向排列红色的两个div，然后再横向的排列蓝色的两个div，最后再纵向的排列绿色的两个div实现布局。达到效果是没有问题的，但是实现起来较为繁琐，而且需要很多额外的标签嵌套。
由于grid是二维的，所以它不需要额外的标签嵌套。html里面结构清晰，如果需要改变页面结构，只需要改变container的样式就可以了，不需要对html进行修改。
Header
Aside
Main
实现响应式布局
借助grid的auto-fill与minmax函数可以实现类似响应式布局的效果，可以应用在后台管理的表单布局等场景。
1
2
3
4
5
6
7
8
结尾
除了上述场景外肯定还有许多场景适合使用grid来完成。grid和 flex都是强大的布局方式，它们并没有明显的优劣之分。关键在于掌握这两种方法，并在开发中根据实际情况选择最合适的方案。
真的不考虑下grid布局？有时候真的很方便！
原文链接：
https://juejin.cn/post/7326816030042669110