博客归纳
真的不考虑下 grid 布局?有时候真的很方便!
00 分钟
2024-4-19
2024-9-20
type
status
date
slug
summary
tags
category
icon
password
URL

前言

flex 布局大家应该已经运用的炉火纯青了,相信在日常开发中大家和我一样不管遇到什么都是 flex 一把搜哈。直到我遇到 grid,才发现有些场景下,不是说 flex 实现不了而是使用 grid 能够更加轻松的完成任务。下面拿几个场景和大家分享一下。

宫格类的布局

比如我要实现一个布局,最外层元素的宽度是 1000px,高度自适应。子元素宽度为 300px,一行展示 3 个,从左到右排列。其中最左边与最右边的元素需要紧挨父元素的左右边框。如下图所示:
notion image

使用 flex 实现

这个页面布局在日常开发中非常常见,考虑下使用 flex 布局如何实现,横向排列元素,固定宽度 300,wrap 设置换行显示,设置双端对齐。看起来很简单,来实现一下。
notion image
实现之后发现了问题,由于我们设置了双端对齐导致,当最后一行的个数不足三个时,页面展示的效果和我们预期的效果有出入。使用 flex 实现这个效果就要对这个问题进行额外的处理。
处理的方式有很多种,最常见的处理方式是在元素后面添加空元素,使其成为 3 的倍数即可。其实这里添加空元素的个数没有限制,因为空元素不会展示到页面上,即使添加 100 个空元素用户也是感知不到的。个人觉得这并不是一个好办法,在实际处理的时候可能还会遇到别的问题。个人觉得还是把 flex 下的子元素设置成百分比好一点。

使用 grid 实现

面对这种布局使用 grid 是非常方便的,设置 3 列,每列 300px,剩下的元素让它自己往下排即可。几行代码轻松实现该效果,不需要 flex 那样额外的处理。
notion image

实现后台管理布局

notion image
这种后台管理的布局,使用 flex 实现当然也没有问题。首先需要纵向排列红色的两个 div,然后再横向的排列蓝色的两个 div,最后再纵向的排列绿色的两个 div 实现布局。达到效果是没有问题的,但是实现起来较为繁琐,而且需要很多额外的标签嵌套。
notion image
由于 grid 是二维的,所以它不需要额外的标签嵌套。html 里面结构清晰,如果需要改变页面结构,只需要改变 container 的样式就可以了,不需要对 html 进行修改。

实现响应式布局

借助 grid 的auto-fillminmax函数可以实现类似响应式布局的效果,可以应用在后台管理的表单布局等场景。
notion image

兼容性对比

flex 的兼容性
notion image
grid 的兼容性
notion image
可以看到 grid 在兼容性上还是不如 flex,grid 虽然强大,但是在使用前还是需要先考虑一下项目的用户群体。

结尾

除了上述场景外肯定还有许多场景适合使用grid来完成。gridflex都是强大的布局方式,它们并没有明显的优劣之分。关键在于掌握这两种方法,并在开发中根据实际情况选择最合适的方案。
上一篇
专业前端都这么使用 console?
下一篇
浏览器开发者工具字体变动