12月30日作业：grid布局手写和grid属性实战演示

作业一：grid代码手写

作业二：通过一个demo.html中两个grid布局，把所学的grid的属性全部演示一遍，同个属性只展示一种效果。
1、demo.html中第一个grid布局
主要展示
（1）grid容器属性：划网格线、网格项目命名、间隙设置、以及项目对其方式和内容对其方式
（2）grid项目属性：项目中某个特定的item的对其方式
2、demo.html中第二个grid布局
主要展示：
（1）grid容器属性：划网格线、网格项目命名、以及项目和内容（item）对其方式、隐式网格的宽高、网格项目流动方向
（2）grid项目属性：网格命名定位、网格线定位
3、实战演示代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12月30日作业</title>
    <style>
        * :not(body){
            outline: 1px dashed blue;
        }
        body {
            width: 1200px;
            min-height: 1000px;
            margin: 0 auto;
        }
        /*grid容器属性：*/
        .contraption1 {
            /*网格基本布局：划网格线，网格项目命名，设置网格间隙*/
            width: 1000px;
            height: 1000px;
            display: grid;
            grid-template-columns: repeat(3,200px);
            grid-template-rows:repeat(3,200px);
            /*grid-column-gap:10px;*/
            /*grid-row-gap:15px;*/
            grid-gap:15px 10px;
            /*grid-gap:row column;   */
            grid-template-areas:'one two three' 'four five six' 'seven eight nine';
            /*网格布局项目对其方式*/
            /*justify-content: end;*/
            /*align-content:center;*/
            place-content:  end  end ;
            /*place-content: align justify ;*/
            /*项目内容对其方式*/
            /*justify-items:end;*/
            /*align-items:center;*/
            place-items:center end ;
            /*place-items:align  justify;*/
        }
        .item {
            width: 150px;
            height: 150px;
            text-align: center;
            line-height: 150px;
            background-color: #ff0000;
        }
        /*设置网格容器中某个特定项目的对其方式*/
        .contraption1 > :nth-child(3) {
            /*justify-self: center;*/
            /*align-self: end ;*/
            place-self:start start;
            background-color: #55a532;
        }
        .contraption2 {
            width: 1000px;
            height: 1000px;
            display: grid;
            grid-template-columns: repeat(3,200px);
            grid-template-rows:repeat(3,200px);
            grid-template-areas:'one one three' 'four five six' 'seven eight nine';
            /*隐式网格李宽和高*/
            grid-auto-columns:150px;
            grid-auto-rows:150px;
            /*网格容器和内容对其方式：*/
            justify-content: center;
            align-content: center;
            place-items:center center;
            /*网格中项目流动方向：默认值：row*/
            grid-auto-flow:column;
        }
        .contraption2 > :first-child {
            /*通过网格命名定位网格区域*/
            grid-area:one;
        }
        .contraption2 > :nth-child(3) {
            /*通过网格线定位网格区域*/
            /*grid-row-start:2;*/
            /*grid-row-end:4;*/
            /*grid-column-start:1;*/
            /*grid-column-end:2;*/
            grid-area: 2/1/4/2;
        }
    </style>
</head>
<body>
<div class="contraption1">
    <div class="item"><span>第1个项目</span></div>
    <div class="item"><span>第2个项目</span></div>
    <div class="item"><span>第3个项目</span></div>
    <div class="item"><span>第4个项目</span></div>
    <div class="item"><span>第5个项目</span></div>
    <div class="item"><span>第6个项目</span></div>
    <div class="item"><span>第7个项目</span></div>
    <div class="item"><span>第8个项目</span></div>
    <div class="item"><span>第9个项目</span></div>
</div>
<hr>
<h1>两个案例，不同属性值展示</h1>
<hr>
<div class="contraption2">
    <div class="item"><span>第1个项目</span></div>
    <div class="item"><span>第2个项目</span></div>
    <div class="item"><span>第3个项目</span></div>
    <div class="item"><span>第4个项目</span></div>
    <div class="item"><span>第5个项目</span></div>
    <div class="item"><span>第6个项目</span></div>
    <div class="item"><span>第7个项目</span></div>
    <div class="item"><span>第8个项目</span></div>
    <div class="item"><span>第9个项目</span></div>
</div>
</body>
</html>

4、实战演示效果展示：（在火狐浏览器下展示，并标注网格线）

总结：
1、grid网格布局适合大布局和整体布局
2、grid整体思路，划网格线——项目定位（网格线和网格域）——项目对其方式——内容在项目中对其方式——单个项目内容对齐调整
3、项目流动方向对隐式项目宽高的影响：
（1）自然方向流动（row）-宽度随网格布局大小，高度可自行设置
（2）column流动方向-高度随网格布局大小，宽度可自行设置
4、place-self优先place-items属性显示

相关文章