封面图加载中
通常情况下，我们会将浏览器分为两个种类，即：现代浏览器和IE 浏览器。当下已经是 2021 年，windows11 都已经发布并放弃 IE。那么何必还需照顾 IE 全系，当然也包括稍微现代点的IE11。
正如我们所知，CSS 用于网页样式设置，在没有 CSS3 出现之前，它并没有起到很好的作用。刚开始的时候我们使用table，然后使用浮动float、 定位position和内联块inline-block，但所有这些方法本质上来讲都是 hacks，存留了很多需要实现的重要功能问题，例如垂直居中。那我们来看看现代布局display: grid，一个比display: flex更加灵活的布局
Grid 和 Flex 特点
Flex 布局主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序)，以最佳方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。涉及到子元素方向改变、缩放、拉伸和收缩等，Flex 可以让你得心应手。
Grid 布局可以控制网格布局容器和他们的子元素，根据不同的设备和可用空间调整元素的显示风格与定位，而不需要去改变文档结构的本质内容。
Grid 和 Flex 对比
Flex 布局是轴线布局，它将产生横轴线和纵轴线，让"子元素"指定轴线的位置进行布局。
Grid 布局是二维布局，它将容器划分成行和列，产生单元格，让 "子元素"指定所在的单元格进行布局 。
上面两张图是我画的大致布局图，实际 Flex 对于子元素的布局，在 Grid 都可以实现，因此在 Grid 图中只展示了 Flex 无法实现的一点，那就是定义子元素布局。因此 Grid 布局远比 Flex 布局强大。
Grid 兼容情况
其中 IE10-11 在其属性加入-ms-前缀会少量支持，但由于 IE 本身不支持流动网格布局，所以也是无济于事。如果考虑使用 Grid 布局时，还需因此增加十分繁琐的兼容，那么最初就不应该使用 Grid 。因此，我决定放弃对 IE 全系的支持。
Grid 和 Flex 分别对卡片风格及其元素的实践感受
接下来我们做一个代码举例，当制作一个简单的卡片布局时（例如 https://www.thyuu.com/author/thyuu →），Grid 和 Flex 的代码会是怎样计算的：
Flex 下的代码：
父元素：
display: flex;
flex-wrap: wrap;
// 设定子元素网格布局
justify-content: space-between;
// 设定子元素每列可用空间分离
子元素：
flex-basis: calc((100% / 4) - 1.5rem);
// 设定每行 4 列、等宽、列距
margin-bottom: 2rem;
// 设定子元素行距
备注:
1. 为什么是行距是 2rem，而不是 1.5rem？因为设置了子元素可用空间分离，同时每个元素会减少 1.5rem 宽度，所以一行 4 个子元素实际 3 个列距会在浏览器自动计算为：（1.5rem × 4）/3 = 2rem
2. 为什么不设置 align-content: space-between （设定子元素每行可用空间分离），这个在父元素定高的情况可以使用，但定高也就无法根据子元素的内容来实现自适应了。Grid 下的代码：
父元素：
display: grid;
gap: 2rem;
// 子元素行距、子元素列距（该写法为简写）
grid-template-columns: repeat(4, 1fr);
// 设定每行 4 列、子元素等宽（该写法为简写）
你发现使用 Flex 时，你不仅需要规定父元素属性，还需要规定子元素属性。而 Grid 仅需要对父元素规定属性即可，当然，若规定子元素的特殊位置，需在子元素规定属性或使用 CSS 查询:nth-child(n)）。
所以，我们清晰可见 Grid 会让我们减少代码量并提高效率。当然，Grid 带来的好处不仅仅于此。
结语
科技的进步在于对过去的改革和创新，当然是围绕着其不变的核心理念而颠覆传统。所以，新的 hacks 就在此刻体现出来了。以前的前端技术在面对不同版本、核心、系统的浏览器时，需要考虑的是兼容，但同时带来的却是头疼。而如今，浏览器逐渐趋向于统一。作为一个前端学习者的我，认为应该倡议的是前端技术无需还惯着旧代浏览器的毛病。
如果你想进一步了解 Grid 布局，可在扩展阅读处查看。