css重点-grid网格布局

display属性：display:grid 指定一个容器采用网格布局

 

grid-template-rows属性：定义每一行的行高

 

grid-template-columns属性：定义每一列的列宽

• repeat()：指定行或列的重复次数，以及需要重复的值
• auto-fill()：根据容器的大小，尽可能多地放入指定大小的行或列
• fr()：表示比例关系，如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍
• minmax()：接收两个参数，分别为最小值和最大值
• auto()：浏览器自己决定长度 
• 网格线的名称：使用方括号指定每一根网格线的名字
• 布局实例：可写两栏式三栏式布局

 

grid-gap属性：grid-row-gap和grid-column-gap的简写

　　grid-row-gap：设置行间距

　　grid-column-gap：设置列间距

 

grid-column属性：控制剩余部分;（grid-column:1/3;表示从左侧第一条线到第三条结束，占用两列）

 

grid-row属性：控制剩余部分;（grid-row:2/4;占用最后两行）;

 

justify-self属性：设置单元格内容水平（左中右）位置（跟justify-items属性用法一样）

 

align-self属性：设置单元格内容垂直（上中下）位置（跟align-items属性用法一样）

• start：使内容在单元格左侧对齐
• center：使内容在单元格居中对齐
• end：使内容在单元格右侧对齐
• stretch：拉伸，占满整个单元格（默认）

 

grid-area属性：用于定义区域

　　grid-template-areas:

　　"header header header"

　　"     .      content content"

　　"footer footer footer";