CSS中grid布局

这里只介绍常用属性

父级使用的属性:

grid-template-columns:1fr 2fr;  将一行平均分成三列(3fr), 第一个子元素占一列, 第二个子元素占用两列

                                    repeat(5,1fr);将一行平均分成五列 //repeat() 接受两个参数 , 第一个是重复次数 , 第二个参数是要重复的值

                                    repeat(3,100px 200px 300px) 这样子也是可以的

                                    repeat(auto-full,100px) 每个子元素宽100px,一行能放多少个,就放多少个,直到换行

 

grid-template-rows: 300px 200px; 第一个子元素高300px  第二个子元素高200px

grid-column-gap:10px; 列间距为10px

grid-row-gap:10px; 行间距为10px

grid-gap:10px 10px; 行间距为10px 列间距为10px

justify-items:(start | end |center |stretch)  设置单元格内容的水平对齐方式

align-items:(start | end |center |stretch) 设置单元格内容的垂直对齐方式

place-items: <align-items> <justify-items>; 上面两个的合写

 

子级使用的属性:

grid-column-start:1;  从列的第1个网格线开始

grid-column-end:3;  到列的第3个网格线结束

grid-row-start:1; 从行的第1个网格线开始

grid-row-end:5; 从行的第5个网格线结束