详讲grid中 grid- column / row - start / end 线布局

1. grid- column / row - start / end 中的属性值

grid- column / row -start 为起点线，grid - column / row -end 为尾线

例如：

  容器为 高宽700px，容器内部格子为 5*5

.container {
            display: grid;
            width: 700px;
            height: 700px;
            background-color: pink;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
            margin: 0 auto;
        }
           

 HTML 结构如下：

<div class="container"> 
      <div></div>
</div>
           

项目代码1如下：

.container div {
            grid-column-start: 2;
            background-color: rgb(85, 255, 0);
        }
           

  当前 div 起始位置 在行的第2条线上

项目代码2如下：

.container div {
            grid-column-start:2;
            grid-column-end: 4;
            background-color: rgb(85, 255, 0);
        }
           

 当前 div 起始位置 在行的第2条线上，尾线在4条线上

项目代码3如下：

        属性值也可以加入 span 配合数值达到另一种效果。

        如果 start 加入 span 属性值，那么它就从当前起始到第几条线，或end 加入 span 属性值，那么它就从当前起始到结尾第几条线

.container div {
        /*  默认线位置为第 1 条 */
    	/*  代表的是 让当前绿色盒子的线位置 向前延伸2条线 */
            grid-column-start: span 2;
    	/*	如果 单独加入 end 加入 span 跟上面单独加入是效果一样的  */
        /*  grid-column-end: span 2;  */
            background-color: rgb(85, 255, 0);
        }
           

项目代码4如下：

        例如：加入一个为 start 起始 end 为延伸到第几条线上，需要 end 加入 span 属性值

.container div {
                /* start 起始位置是第 2 条线,然后 end 加入 span 向后延伸到第 3条线 */
                grid-column-start: 2;
                grid-column-end: span 3;
                background-color: rgb(85, 255, 0);
            }
           

项目代码5如下： 

        则 end 不加 span 属性值，它的意思截然不同，它就会从起始线 2 到线 3 的位置了

.container div {
                /* start 起始位置是第 2 条线, end 结尾到第 3 条线 */
                grid-column-start: 2;
                grid-column-end: 3;
                background-color: rgb(85, 255, 0);
            }
           

2. 简写属性：

它是有两个简写属性分别是：grid-area；grid-column / grid-row

        2.1 grid-area

  在grid-area属性可以给项目设置名字，以名字在容器中规划位置；它还可以，以线来规划位置，grid-area以线来规划项目在容器的位置时，它是个复合属性值分别代表：

第一个值代表 grid-row-start

第二个值代表 grid-column-start

第三个值代表 grid-row-end

第四个值代表 grid-column-end

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;
           

列

• grid-column-start
• grid-column-end

行

• grid-row-start
• grid-row-end

项目代码5如下： 

        例如：把div 行 与 列的起始点都会第 2条线，行 尾线往后延伸3条，列 尾线为第5条

.container div {
            grid-area: 2 / 2 / span 3 / 5;
            background-color: rgb(85, 255, 0);
        }
           

2.2 grid-column / grid-row

  grid-column / grid-row 也是一个复合属性分别代表：

grid-column: grid-column-start / grid-column-end;
grid-row: grid-row-start / grid-row-end;
           

项目代码6如下：

        跟 项目代码5 效果一样，只不过用了另一种复合属性

.container div {
            grid-row: 2 / span 3;
            grid-column: 2 / 5;
            background-color: rgb(85, 255, 0);
        }
           

—————— 如有错误，请联系 [email protected],会立即更改，感谢参考！