1027作业

grid布局显示网格与项目属性

<body>
    <div class="container">
        <div class="item">item1</div>
    </div> 
    <style>
        .container{
            width: 300px;
            height:100px;
            display: grid;
            /* 显示网格 */
            /* 3列3行 宽度为100的50 */
            /* grid-template-columns: 100px 100px 100px;
            grid-template-rows: 50px 50px 50px; */
            /* 3列3行 宽度为100的50 */
            /* grid-template-columns: repeat(3, 100px);
            grid-template-rows: repeat(3, 50px); */
            /* 显示网格 repeat:重复 fr：为比例 */
            grid-template-columns: repeat(3,1fr);
            grid-template-rows: repeat(3,1fr);
        }
        .container > .item{
            background-color: bisque;
            /* 起始行 / 结束行*/
            grid-row: 3/4;
            /* 起始列/结束列 */
            grid-column:1/2;
            grid-row: 1 /span 1;
            grid-column: 1 / span 1;
            /* grid-area: 行开始/列开始/行结束/列结束; */
            grid-area: 3/1/span 1/span 3;
        }
    </style>

实例效果

grid布局隐式网格与与排列规则

<title>grid隐式网格与与排列规则</title>
</head>
<body>
    <div class="container">
        <div class="item">item-1</div>
        <div class="item">item-2</div>
        <div class="item">item-3</div>
        <div class="item">item-4</div>
        <div class="item">item-5</div>
        <div class="item">item-6</div>
        <div class="item">item-7</div>
        <div class="item">item-8</div>
        <div class="item">item-9</div>
        <!-- 在加2个项目 -->
        <div class="item other">item-10</div>
        <div class="item other">item-11</div>
    </div>
    <style>
        .container{
            width: 400px;
            height: 150px;
            display: grid;
            /* 显示网格绘制 */
            grid-template-rows: repeat(3,1fr);
            grid-template-columns: repeat(3,1fr);
            /* 1.排列规则 默认按照行排列*/
            grid-auto-flow: row;
            /* 列 排列 */
            /* grid-auto-flow: column; */
            /* 2.隐式网格 多余的项目，出现在隐式网格中*/
            grid-auto-rows: 1fr;
            /* 列优先排列 */
            grid-auto-flow: column;
            /* 设置隐式网格的列宽 */
            grid-auto-columns: 100px;
        }
        .container > .item{
            background-color: antiquewhite;
        }
        .container > .item.other{
            background-color: orange;
        }
        /* 排列规则：grid-auto-flow：row/column 行优先与列有优先
            隐式网格：grid-auto-row/colum 设置隐式网格的行与列
        */
    </style>
</body>

实例效果

grid布局项目在容器中对齐与项目在单元格中对齐

 <title>grid项目在容器中对齐与项目在单元格中对齐</title>
</head>
<body>
    <div class="container">
        <div class="item">item-1</div>
        <div class="item">item-2</div>
        <div class="item">item-3</div>
        <div class="item">item-4</div>
        <div class="item">item-5</div>
        <div class="item">item-6</div>
        <div class="item">item-7</div>
        <div class="item">item-8</div>
        <div class="item">item-9</div>
    </div>
    <style>
        /**
        * * 1. 对齐前提: 必须存在"剩余空间"
        * * 2. 对齐方案: "剩余空间"在"项目"之间的分配方式
        * * 3. 剩余空间: Flex(主轴, 交叉轴), Grid(容器, 单元格)
        * * Grid: 剩余空间存在于"容器" 或 "单元格"
        * * 容器中: place-content, place-items
        * * 项目中: place-self
        */
        .container{
            background-color: aqua;
            border: 1px solid;
            /* 创建网格剩余空间 */
            width: 600px;
            height: 600px;
            display: grid;
            grid-template-columns: repeat(3,100px);
            grid-template-rows: repeat(3,100px);
            /* 1.项目在容器中对齐 */
            /* place-content: 垂直方向 水平方向; */
            /* 默认垂直居上 水平居左 */
            /* place-content: start start; */
            /* 垂直居中 水平居中 */
            /* place-content: center center; */
             /* 垂直居中 水平居右 */
            place-content: center end;
            /* 重复值可以省略 */
            place-content: center;
            place-content: space-between space-around;
            place-content: space-between ;
            place-content: space-around;
            /* ---------------------------- */
            /*2.项目在单元格中对齐  */
            /* 项目在单元格中要有剩余空间才能实现对其， */
            /* place-items: 垂直方向 水平方向; */
            /*  默认垂直居上 水平居左 */
            /* place-items: start; */
            /*  垂直居中 水平居中 */
            place-items: center;
            /* 垂直居中 水平居右 */
            /* place-items: center end; */
            /* place-items: space-between space-between; */
        }
        .container > .item{
        background-color: antiquewhite;    
        width: 80px;
        height: 80px;
        place-items: space-between space-between;
        }
        /* 设置某个项目在单元格中单独设置 */
        .container > .item:nth-child(5){
            background-color:aquamarine;
            /* 选中单独设置某个单元格 */
            place-self: end;
        }
    </style>
</body>

实例效果

grid布局中的行列间隙 gap

title>grid布局中的行列间隙</title>
</head>
<body>
    <div class="container">
        <div class="item">item-1</div>
        <div class="item">item-2</div>
        <div class="item">item-3</div>
        <div class="item">item-4</div>
        <div class="item">item-5</div>
        <div class="item">item-6</div>
        <div class="item">item-7</div>
        <div class="item">item-8</div>
        <div class="item">item-9</div>
    </div>
    <style>
        .container{
            background-color: antiquewhite;
            display: grid;
            width: 400px;
            height: 400px;
            border: 2px solid;
            grid-template-columns: repeat(3,100px);
            grid-template-rows: repeat(3,100px);
            /* 行列间隙 */
            /* gap:垂直方向，水平方向 */
            gap:10px;
        }
        .container > .item{
            background-color: aqua;
            /* margin: 10px; */
        }
    </style>
</body>

案例效果

批改老师：

PHPz

批改状态：合格

老师批语：总结的很好,继续加油

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

如何高效打造开发环境及语法，网络的认识

2022-10-14 15:56:43