【css】grid的简单使用

(1)首先:区分容器和项目的概念

容器都需要：

display:grid

(2)行|列的两种赋值方法：

直接赋值和repeat方法，以列宽举例 

a.直接赋值：

grid-template-columns: 70% 30%;

b.repeat方法：

grid-template-columns: repeat(12, 1fr);

 

(3)列宽行高

grid-templete-columns--列宽

grid-templete-rows--行高

一般可以不设置行高

 

(4)fr比例的问题 

grid-template-columns: 1fr 2fr 3fr;

 

(5)auto实现双飞翼 

grid-template-columns: 100px auto 100px;

 

(6)行列之间的间隙

grid-gap: grid-row-gap grid-column-gap

grid-gap:20px 20px;

 

(7)先行后列还是先列后行~

grid-auto-flow:row(默认)|column

 

(8)单元格内容的水平位置：

justify-items: start | end | center | stretch;   //这一点和flex的justify-content区分一下

align-items: start | end | center | stretch;

 

(9)整个内容区域在容器中的位置：

justify-content: start | end | center | stretch | space-around | space-between | space-evenly;

align-content: start | end | center | stretch | space-around | space-between | space-evenly;

里边几个很有意思的属性,针对项目：

space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。

space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。

space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。