一篇文章让你了解CSS中flex布局中的网格布局

标签：弹性   art   布局   垂直居中   star   row   justify   容器   结束   

前段时间我刚讲了flex布局中的弹性布局，今天我就再来讲讲网格布局。
网格布局相对于弹性布局个人觉得较为简单，
作用在容器上的：
display : grid
grid-template-columns : 设置列数
grid-template-rows : 设置行数
fr单位
repeat()方法
注：网格中提供了一个新的单位：fr ( 比例单位 )
grid-template-areas : 划分区域的
注：区域必须是矩形。
grid-template:复合写法
grid-template-rows
grid-template-columns
grid-template-areas

grid-template:
"a1 a1 a1" 1fr
"a3 a3 a2" 1fr
"a3 a3 a2" 1fr
/1fr 1fr 1fr;

grid-column-gap : 列的间距
grid-row-gap : 行的间距
grid-gap : 复合写法
grid-row-gap grid-column-gap

justify-items : 子项的水平居中方式
默认 : stretch 默认值，拉伸。表现为水平或垂直填充。
start
center
end

align-items : 子项的垂直居中方式
默认 : stretch 默认值，拉伸。表现为水平或垂直填充。
start
center
end
place-items : 复合写法
align-items justify-items

justify-content : 整体网格的水平对齐方式
默认：stretch
start
end
center
space-between
space-around
space-evenly

align-content : 整体网格的垂直对齐方式
默认：stretch
start
end
center
space-between
space-around
space-evenly

place-content : 复合写法
align-content justify-content


作用在子项上的：

grid-area : 找指定的区域
1.对应网格的名字
2.写对应的线的数字：grid-area : 1 / 3 / span 2 / 4;
grid-row-start / grid-column-start / grid-row-end / grid-column-end

grid-column-start 水平方向上占据的起始位置
grid-column-end 水平方向上占据的结束位置
grid-row-start 垂直方向上占据的起始位置
grid-row-end 垂直方向上占据的结束位置
注：只有在grid-column-end和 grid-row-end 中可以设置span操作。span去设置的不是结束位置，而是个数。
正常数字是位置，加上span是个数。

一篇文章让你了解CSS中flex布局中的网格布局

标签：弹性   art   布局   垂直居中   star   row   justify   容器   结束   

原文地址：https://www.cnblogs.com/rpxx/p/12493340.html