使用grid布局解决flex的痛点,以及如何搭建响应式布局

问题

在页面切分时,我们经常使用flex布局。当需要对页面中的多个元素进行布局时,使用flex布局可以帮助我们快速创建整齐的界面。然而,flex布局也存在一些难以解决的布局问题。

特别是当我们使用v-for循环将后端数据展示在页面上时,如果最后一行的元素较少,并且我们使用 justify-content: space-between; 属性值来处理空白区域的分布,最后一行可能会出现间隔过大的情况。

css 复制代码
display: flex;
flex-wrap: wrap;
justify-content: space-between;

可以通过调整对齐方向或增加间距来解决这个问题,但这样就无法像之前一样轻松处理居中和间距。

因此,我们引入了grid布局,它能够简单地解决这个问题。

grid 布局

css 复制代码
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 30px;
  • display: grid;: 改变展示方式为grid。
  • grid-template-columns: 1fr 1fr 1fr;: 指定展示元素的列数为3列,其中1fr是一个自适应单位。
  • gap: 30px;: 指定元素之间的间距为30px。

通过这样的设置,我们可以轻松解决使用flex布局带来的问题。

grid-template-columns

我们可以通过修改grid-template-columns属性的值来更好地理解这个属性。

  • grid-template-columns: 1fr;
  • grid-template-columns: 1fr 1fr;
  • grid-template-columns: 1fr 300px 1fr;

grid-template-columns: repeat()

grid-template-columns: repeat() 是CSS Grid布局中的一个属性值,用于定义网格容器中水平方向(列)的网格轨道(track)结构。具体语法如下:

css 复制代码
grid-template-columns: repeat(number, size1, size2, ...);
  • number: 表示每行中重复的次数。例如,如果要创建一行3次循环排布,则填入数字 3。
  • [size]...: 可以是具体的长度值(如像素、百分比、fr 等)、auto 或者是一个 Track-Breadth(网格轨道大小)。这个参数可以有多个,每个值对应一个循环中一列的大小。如果为一个值,则该循环所有列将使用相同的默认大小。

grid-template-columns: repeat(3, 1fr);

grid-template-columns: repeat(3, 1fr 200px);

grid-template-columns: repeat(3); 省略了长度时:

类似于表格中合并单元格的布局

css 复制代码
grid-column: 1/2;
grid-row: 2/5;
  • grid-row: 从第几行开始 / 第几行+占几个。
  • grid-column: 从第几列开始 / 第几列+占几个。

响应式布局

css 复制代码
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))

正常页面:

缩小页面后:

minmax(min, max) 是CSS Grid布局中的一个函数,用于指定一个轨道(grid track)的大小范围。这个函数接受两个参数,一个是最小值(min),一个是最大值(max)。

  • min 表示轨道的最小大小,可以是一个固定的长度值(如像素 px),也可以是一个相对值(如百分比 % 或视窗单位 vw)。
  • max 表示轨道的最大大小,同样可以是一个固定的长度值或相对值。

这个函数的作用是告诉布局系统,在满足最小和最大值的范围内,尽可能地占据空间。如果有更多的空间可用,轨道将会增大,但不会超过最大值。如果空间不足,轨道将会缩小,但不会小于最小值。

本人还在学习中,水平有限,本文可能存在纰漏或错误,如有问题欢迎指正,感谢你阅读这篇文章,如果你觉得写得还行的话,不要忘记点赞、评论、收藏哦!祝生活愉快!😘

相关推荐
中微子几秒前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上102416 分钟前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
文心快码BaiduComate27 分钟前
文心快码Zulu,如何成为我眼里的“AI编码战士”
程序员
芬兰y32 分钟前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁38 分钟前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry39 分钟前
Fetch 笔记
前端·javascript
拾光拾趣录40 分钟前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟41 分钟前
vue3,你看setup设计详解,也是个人才
前端
Lefan1 小时前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson1 小时前
青苔漫染待客迟
前端·设计模式·架构