1230作业-grid属性实战演示-php培训十期线上班

1.作业要求

实战展示Grid项目和容器的所有属性

2.初始化Grid容器和项目，设置参考线

2.1初始化代码

html部分：

 <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
    </div>

css部分：

.container {
            width: 600px;
            height: 500px;
            background-color: gray;
            margin:50px auto;
            outline: 1px dashed blue;
            display: grid;/*将container容器定义为Grid容器*/
            grid-template-columns:100px 100px 100px; /*定义网格的列宽*/
            grid-template-rows: repeat(3,80px);/*定义网格的行高*/
            grid-column-gap:10px;/*定义网格列之间的间隙*/
            grid-row-gap:5px;/*定义网格行之间的间隙*/
        }
        .item {
            background-color: wheat;
            outline: 1px dashed #55ce9f;

2.2效果图：

3.容器属性演示

3.1命名网格区域代码及效果图（需打开浏览器控制器，选择grid项目，勾选显示网格名称才能显示）

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

3.2网格中各项目的流动方向

grid-auto-flow: column;/*定义网格项目先列后行*/

3.3设置网格在容器中的水平对齐位置

justify-content: center;/*定义网格在容器中的水平对齐为居中*/

3.4设置网格在容器中的垂直对齐位置

align-content: center;/*定义网格在容器中的垂直对齐为居中*/

3.5设置网格在容器中的水平及垂直位置的简写（先垂直后水平）

place-content: end end;/*定义网格在容器中位置的简写*/

3.6设置项目中的内容在单元格中的水平对齐位置

justify-items: center;/*定义项目中的内容在水平方向的对齐为居中*/

3.7设置项目中的内容在单元格中的垂直对齐位置

align-items: center;/*定义项目中的内容在垂直方向的对齐为居中*/

3.8设置项目中的内容在单元格中位置的简写方式（先垂直后水平）

place-items: center start;/*定义项目中内容位置的简写*/

4.项目属性展示

4.1将项目1放入行与列的网络起止线封闭的第一排第二个单元格中

/*将项目1放入第一行第二个单元格*/
.item:nth-of-type(1){
      grid-column-start:2;/*项目单元格左边线为网格第二条纵线*/
      grid-column-end:3;/*项目单元格右边线为网格第三条纵线*/
      grid-row-start:1;/*项目单元格上边线为网格第一条纵线*/
      grid-row-end: 2;/*项目单元格左边线为网格第二条纵线*/
}

4.2将项目5放置在a区域

 /*将项目5放入a区域中*/
        .item:nth-of-type(5){
            grid-area: a;
        }

4.3单独设置项目6中内容的对齐方式

/*单独设置项目6中的内容为水平靠下，垂直居中*/
.item:nth-of-type(6){
     justify-self: end;
     align-self: center;
     }

5.小结

5.1区分网格相对于网格容器，项目相对于网格，项目内容相对于项目这三个层次。基本思路是前缀justify对应水平、align对应垂直、place是垂直和水平的简写，后缀content对应容器、items对应项目、self对应项目内容。

5.2grid -template-area与grid-area一般成对使用，前者在容器中给网格命名，后者在具体项目中指定项目所在网格。

6.手写笔记