grid布局是一个二维布局方法,纵横两个方向总是同时出
grid-template-columns和grid-template-rows
对网格进行横纵划分,形成二维布局。单位可以是像素,百分比,自适应(auto)以及fr单位(网格剩余空间比例单位)。
auto与1fr区别在于,auto时根据内容撑起的变宽,fr是对剩余空间的划分
有时候,我们网格的划分是很规律的,如果需要添加多个横纵网格时,可以利用repeat()语法进行简化操作
如果列布局(行布局的分布)选用fr作为单位,并且总fr的值<1的话,那么有剩余空间
如果不写grid-template-colums和grid-template-rows的话
它会自动根据块元素占据的行数换份行数,然后列数只有一列
如果只写列数不写行数,那么行高将会是整个盒子的高度的等比例划分
如果只写行的行高,不写列的宽度。那么还是只有一列,然后写几个行,就会等分规划几个列。其他行数可能就会被压缩
repeat()使用
语法: grid-template-rows/columns: repeat(重复个数,大小) ;
grid-template-areas和grid-template
area是区域的意思,grid-template-areas给我们网格划分区域的。此时grid子项只要使用grid-area属性指定其隶属于那个区
grid-template是grid-template-rows,grid-template-columns和grid-template-areas属性的缩写。
需要划分几个区域就需要几个div(块元素),然后分别给每个div分配各自的区域
在区域划分当中是不允许出现特殊图形的。比如像凸型什么的都不允许的。一定要形成矩形才可以。
复合写法:grid-template:
“grid-template-arear” grid-template-rows
/grid-tempalte-columns
建议还是不要写复合啦,那么麻烦的
grid-column-gap和grid-row-gap
grid-column-gap和grid-row-gap属性用来定义网格中网格间隙的尺寸。css grid-gap属性是grid-column-gap和grid-row-gap属性的缩写(复合写法)
grid-gap:grid-row-gap gid-column-gap
justify-items和align-itms
justify-items指定了网格元素的水平呈现方式,是水平拉伸显示,还是左中右对齐。align-item所指定网格元素的垂直呈现方式,是垂直拉伸显示,还是上中下显示对齐(网格内的元素)
默认情况下是左右上下拉伸的。justify-items:stretch ;align-item:stretch
左右垂直居中 justify-items:center;align-item:center
水平拉伸,垂直居中justify-items: stretch;align-items: center;
place-items是align-items和justify-items属性复合写法
place-items:align-item justify-item
place-items:stretch center
justify-content和align-content
justify-content指定了网格元素的水平分布方式。align-content
指定了网格元素的垂直分布方式。(整个独立的网格)
只有当有剩余空间时。才能有效。
原图(默认值):
align-content:start justify-content:start
align-content:center justify-content:center
align-content:center justify-content:space-between
align-content: center;justify-content:space-around
align-content: center;justify-content:space-evenly
space-around和space-evenly区别在于:space-around的时网格四周距离都是等分的,所以网格网格与网格中间的距离是两个网格侧边的距离的两倍,两侧的距离比网格中间距离小。space-evenly的是不管两侧还是网格于网格之间的距离都是一样的
复合写法:place-content:align-content justify-content
place-content:space-between space-between;
作用在grid子项上的css属性
假设规划一个九宫格,移动的位置参考线都是每条线对应的数字(可以更改每条横、竖线每条线的名字)
对某个单元格的移动:被移动的单元格的位置如果后面还有元素,就会被后面的元素替代,后面依次往前进一格
grid-column-start: 3; 水平方向上的占据起始的位置
grid-column-end: 4; 水平方向上的占据结束的位置 (span属性 )
grid-row-start: 2; 垂直方向上的占据起始的位置
grid-row-end: 3; 垂直方向上的占据结束位置 (span属性)
通过位置的控制,能够将一个单元格进行延展
方法一:
方法二:通过span属性值,进行重复操作
写法:grid-row/column-end: span 重复个数;
复合写法:
grid-column:grid-column-start / grid-column-end
grid-row:grid-row-start / grid-row-end
斜线分割
grid-column:2 / 4;
grid-row:2 / 4 等价于grid-row:2 / span 2;
grid-area:划分这个单元格占据多少区域
写法:grid-area:纵向起始位置/横向起始位置/纵向结束位置/横向结束位置(名字或位置)
位置:grid-area:2/1/4/3;
位置:先划分区域,在分布
justify-self:单个网格元素的水平对齐方式
align-self:单个网格元素垂直方式
place-self:复合写法 align-self justify-self