通常情况下,我们会将浏览器分为两个种类,即:现代浏览器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 布局是轴线布局,它将产生横轴线和纵轴线,让”子元素”指定轴线的位置进行布局。

Flex 以轴线定义

Grid 布局是二维布局,它将容器划分成行和列,产生单元格,让 “子元素”指定所在的单元格进行布局 。

Grid 以方格定义

上面两张图是我画的大致布局图,实际 Flex 对于子元素的布局,在 Grid 都可以实现,因此在 Grid 图中只展示了 Flex 无法实现的一点,那就是定义子元素布局。因此 Grid 布局远比 Flex 布局强大。

Grid 兼容情况

在 caniuse.com 上查询 CSS 兼容性报告

其中 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 布局,可在扩展阅读处查看。

扩展阅读