grid 布局语法整理

/** 块级的网格容器 | 块级的网格容器 | 继承父级的网格容器 */
display: grid | inline-grid | subgrid ; 


/** 3行3列，宽高100px */
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
/** 百分比写法 */
grid-template-columns: 40% 20% 40%;
grid-template-rows: 33.33% 33.33% 33.33%;
/** repeat语法 */
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%);
/** 网格线指定一个名字, 甚至可以添加2个名字【空格隔开，中括号包裹】 */
grid-template-columns: [first] 40px [line2] 50px [line3 secrod-name];   
grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line];  
/** auto-fill 每列宽度100px，然后自动填充，直到容器不能放置更多的列。 */
grid-template-columns: repeat(auto-fill, 100px);
/** fr单元设置份数,但是是固定子项后剩下的长度所划分的份数 */
grid-template-columns: 1fr 2fr 3fr;
grid-template-rows: 1fr 50px 1fr;
/** auto 关键字 */
grid-template-columns: 100px auto 100px;
grid-template-rows: 100px auto 100px;
/** minmax() 接受两个参数，分别为最小值和最大值 */
grid-template-columns: 1fr 1fr minmax(100px, 1fr);


/** grid-row-gap、grid-column-gap   grid-gap是前两个的合并简写 */
grid-row-gap: 20px;
grid-column-gap: 20px;
grid-gap: 20px 20px;


/** 划分出9个单元格，然后将其定名为a到i的九个区域，分别对应九个单元格 */
/** 
 * 注意，区域的命名会影响到网格线。
 * 每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end
 * 比如，区域名为a，则起始位置的水平网格线和垂直网格线叫做a-start，
 * 终止位置的水平网格线和垂直网格线叫做a-end。
 */
grid-template-areas: 'a b c'
                     'd e f'
                     'g h i';
/** 如果某些区域不需要利用，则使用"点"（.）表示 */                  
grid-template-areas: 'a . c'
                     'd . f'
                     'g . i';


/** grid-auto-flow 默认先行后列，可更改为先列后行 */
grid-auto-flow: column;
/** 先行后列，紧密填充 */
grid-auto-flow: row dense;
/** 先列后行，紧密填充 */
grid-auto-flow: column dense;


/** justify-items 属性设置单元格内容的水平位置（左中右）
 *  align-items属性设置单元格内容的垂直位置（上中下）
 *  place-items 是前两个合并简写
 * 
 *  对齐起始边缘 | 对齐结束边缘 | 内部居中 | 拉伸，占满整个宽度
 */
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
place-items： start end;


/** justify-content 属性设置整个内容区域在容器里面的水平位置（上中下）
 *  align-content 属性设置整个内容区域的垂直位置（上中下）
 *  place-content 是前两个合并简写
 * 
 *  对齐起始边缘 | 对齐结束边缘 | 内部居中 | 拉伸，占满整个宽度
 */
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly; 
place-content: start end;


/** 3 X 3网格，设置超出这个网格的子项目属性为50*100 */
grid-auto-columns: 50px;
grid-auto-rows: 100px;


/** 项目属性，调整子项目位置
 * grid-column-start属性：左边框所在的垂直网格线
 * grid-column-end属性：右边框所在的垂直网格线
 * grid-row-start属性：上边框所在的水平网格线
 * grid-row-end属性：下边框所在的水平网格线
 * grid-column属性是 grid-column-start和grid-column-end的合并简写
 * grid-row属性是grid-row-start属性和grid-row-end的合并简写
 *
 * 下面代码指定1号项目的左边框是第二根垂直网格线，右边框是第四根垂直网格线
 */
grid-column-start: 2;
grid-column-end: 4;
/** span关键字 代表跨越几个单元格  */
grid-column-start: span 2;


/** 指定项目放在哪一个区域  */
grid-area: a;

/** 
 * justify-self只作用于单个项目的justify-items
 * align-self只作用于单个项目的align-items
 */
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;