Grid容器和项目属性-PHP培训十期线上班 学号：510251 12月30日作业

Grid容器和项目属性

一、Grid中的术语

• 网格线(grid lines): 编号, 命名
• 轨道(grid tracks): 二条线中间的空间, px, %, fr,auto
• 单元格(grid cell): 四条网格线包起来的封闭空间
• 网格区域(grid area): 多个单元格形成的矩形区域
• 网格间距(grid gap): 行或列之间的间隙

二、创建网格容器

• display: grid;将容器转为网格容器

三、画网格线

• grid-template-colums: ; : 基于列,定义网络线的名与与轨道大小
• grid-template-rows: ; : 基于行,定义网络线的名与与轨道大小
• grid-column-gap | grid-row-gap | grid-gap | gap: 行/列间隙
• grid-template-area: 命名网格区域(配合gird项目的grid-area属性)
• grid-auto-columns: 隐式网格的列宽
• grid-auto-rows: 隐式网格的行高
• grid-auto-flow: 网格中项目的流动方/排列方向(默认先行后列)

四、Grid容器属性

• grid-template-area: 命名网格区域(配合gird项目的grid-area属性)
  语法：

    .container {
            grid-template-areas:
        'a b c'
        'd e f'
        'g h i';
        }

  显示效果：
  

---

• grid-auto-flow: 网格中项目的流动方/排列方向(默认先行后列)
  语法：

    .container {
            /*默认先行后列*/
            /*grid-auto-flow: row;*/
            /*设置先列后行*/
            /*grid-auto-flow: column;*/
        }

  显示效果：
  

---

• justify-contens: 设置所有项目在网格中的水平对齐方式
  语法：

  .container {
             /*默认，从左到右*/
             /*justify-content: start;*/
             /*从右到左*/
             /*justify-content: end;*/
             /*居中*/
             /*justify-content: center;*/
         }

  显示效果：
  

---

• align-content: 设置所有项目在网格中的垂直对齐方式
  语法：

  .container {
            /*默认，从上到下*/
            /*align-content: start;*/
            /*从下到上*/
            /*align-content: end;*/
            /*居中*/
            /*align-content: center;*/
        }

效果显示：

---

• place-content: justify-content和align-content的属性简写，第1个值 表示垂直方向，第二个值表示水平方向。

语法：

.container {
            /*align-content和justify-content的简写*/
            /*place-content: end center;*/
        }

效果显示：

---

• justify-items: 设置内容在单元格内的水平对齐方式
  语法：

  .container {
            /*默认，从左到右*/
            /*justify-items: start;*/
            /*从右到左*/
            /*justify-items: end;*/
            /*居中*/
            /*justify-items: center;*/
        }

效果显示：

---

• align-items: 设置内容在单元格内的垂直对齐方式
  语法：

  .container {
            /*默认，从上到下*/
            /*align-items: start;*/
            /*从下到上*/
            /*align-items: end;*/
            /*居中*/
            /*align-items: center;*/
        }

效果：

---

• place-items: justify-items和align-items的属性简写。第1个值 表示垂直方向，第二个值表示水平方向。
  语法：

  .container {
            /*align-items和justify-items的简写*/
            /*place-items: end center;*/
        }

  效果：
  

---

五、Grid项目属性

• grid-column-start/end | grid-row-start/end: 将项目放入行与列的网络起止线封闭的单元格中
  语法：

  .container > .item:first-of-type {
            grid-column-start: 2;
            grid-column-end: 3;
            grid-row-start: 1;
            grid-row-end: 2;
        }

  效果：
  

• grid-area: 将项目按顺时针顺序(top/left/bottom/right), 放入指定网格区域内
  语法：

  .container > .item:nth-of-type(5) {
            grid-area: a;
        }

  效果：
  

• justify-self: 设置网格容器中某一个特定项目的水平对齐方式
  语法：

  /*水平*/
            /*justify-self: start;*/
            /*justify-self: end;*/
            /*justify-self: center;*/

  效果：
  

• align-self: 设置网格容器中某一个特定项目的垂直对齐方式
  语法：

  /*垂直*/
            /*align-self: start;*/
            align-self: end;
            /*align-self: center;*/

  效果：
  

• place-self: justify-self和align-self的属性简写
  语法：
  place-self: end center;
  效果：
  

---

六、手抄Grid容器和项目属性