grid网格布局

使用flex布局的痛点

如果使用justify-content: space-between;让子元素两端对齐,自动分配中间间距,假设一行4个,如果每一行都是4的倍数那没任何问题,但如果最后一行是2、3个的时候就会出现下面的状况:

css 复制代码
/* flex布局 两端对齐 */
display: flex;
flex-wrap: wrap;
justify-content: space-between;

常见flex布局

如何想让最后一行左对齐是有办法的,大家可以自行去搜索办法,能实现但是操作起来有些麻烦,但是如果这种布局使用grid布局的话,就会变的非常容易

同样的布局,将flex改为grid
css 复制代码
/* grid布局 两端对齐,最后一行左对齐*/
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 30px;   
解释一下上面的代码:

display:grid 是转为网格布局,这个是必须的

grid-template-columns:1fr | px 这是将网格分为几列,1fr是自适配单位,可以当成栅格

gap:30px 这是网格四周的间隔

注意:这三个属性是给父容器添加的,子元素,可以不用设置宽度,也不用设置margin间距即可完成如下布局
grid布局

看,上面的grip布局,最后一行不是4的倍数,但是可以左对齐,不会像flex布局一样的bug。

深入了解一下grid-template-columns属性
独占一行
css 复制代码
grid-template-columns: 1fr;
一行分为两列 多列只需多写几个1fr
css 复制代码
grid-template-columns: 1fr 1fr;
中间固定200px,两边自动平均分配
css 复制代码
grid-template-columns: 1fr 200px 1fr;
如果5列的值相同,可以使用repeat()函数,grid-template-columns: repeat(5,1fr)当然将1fr换成固定的px尺寸也可以
css 复制代码
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;

grid-template-columns: repeat(5,1fr)
响应式布局,auto-fill主轴上指定的宽度或者重复次数是最大可能的正整数,minmax最小值255px、最大值1fr代表剩余空间
css 复制代码
grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); 

注意:实现这种响应式布局,一定要注意父容器不能使用固定宽度,可以将父容器改为如:80%,这样就能根据屏幕的宽度,自动展示一行展示几个了。

grid-row和grid-column可以控制某个元素占领几份

注意是给开始的盒子设置样式,并非所有

css 复制代码
.layout .box1{
 	grid-row: 1/3;
    grid-column: 1/3;
}

以grid-row行为例,从第几列开始 / 第几列+想占几个;

相关推荐
Beginner x_u3 分钟前
[AJAX 实战] 图书管理系统下 编辑图书
前端·javascript·ajax·bootstrap
Ace_31750887765 分钟前
# 唯品会商品详情接口开发指南
前端
Beginner x_u7 分钟前
【AJAX 实战】图书管理系统上 渲染图书列表+新增图书+删除图书
前端·ajax·bootstrap
恋猫de小郭11 分钟前
Flutter 里的像素对齐问题,深入理解为什么界面有时候会出现诡异的细线?
android·前端·flutter
anyup24 分钟前
AI 也救不了的前端坑,你遇到过吗?社区、AI、源码三重排查!
前端·数据可视化·cursor
tager31 分钟前
还在为跨框架的微信表情包烦恼?我写了个通用的,拿去吧!🚀
前端·vue.js·react.js
陈随易36 分钟前
一段时间没写文章了,花了10天放了个屁
前端·后端·程序员
Codebee41 分钟前
OneCode基础组件介绍——树形组件(Tree)
前端·编程语言
Cheishire_Cat42 分钟前
AI Coding宝藏组合:Cursor + Cloudbase-AI-Toolkit 开发游戏实战
前端
audience1 小时前
uni-app运行环境版本和编译器版本不一致的问题
前端