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行为例,从第几列开始 / 第几列+想占几个;

相关推荐
simple_lau3 分钟前
鸿蒙设备如何与低功耗蓝牙设备通讯
前端
啃火龙果的兔子1 小时前
解决 Node.js 托管 React 静态资源的跨域问题
前端·react.js·前端框架
ttyyttemo1 小时前
Compose生命周期---Lifecycle of composables
前端
以身入局1 小时前
FragmentManager 之 addToBackStack 作用
前端·面试
sophie旭1 小时前
《深入浅出react》总结之 10.7 scheduler 异步调度原理
前端·react.js·源码
练习前端两年半1 小时前
Vue3 源码深度剖析:有状态组件的渲染机制与生命周期实现
前端·vue.js
大胖猫L1 小时前
深搜与广搜在 TypeScript 类型递归中的应用
前端·算法
吃饭睡觉打豆豆嘛1 小时前
彻底搞懂前端路由:从 Hash 到 History 的演进与实践
前端·javascript
蛋仔聊测试1 小时前
基于 Playwright(python) 的前端性能测试脚本实现
前端·python
算了吧1 小时前
基于vue3和koa2打造的一款企业级应用框架(建设中)-Elpis
前端·前端框架