CSS学习(Grid布局和flex布局比较)
grid网格布局真香,比flex方便太多了,grid-template-columns用法
文章目录
- flex布局的时候
- 网格grid布局的时候
- 可以修改某一列的像素
- 可以修改某一列的宽度占比
- 自适应屏幕分列
- 让第一个元素长宽都占2个
flex布局的时候
最后一行不够4个的时候 最下面一行无法对齐
网格grid布局的时候
添加间隔
可以修改某一列的像素
可以修改某一列的宽度占比
改成2fr 相当于占两份
写固定格式 前面是分几份 后面是每份的大小
因为不齐 还是使用自动填充 1fr比较好
自适应屏幕分列
使用自适应屏幕方法
auto-file 代表自适应 minmax(最小值,最大值)
记得修改宽度
让第一个元素长宽都占2个
只让第一个变大
占两行
grid-row : 1/3 1代表开始的列线是第一个 3代表结束的列线
占两列