grid网格和合并项目

网格线

在grid布局中 这些分隔线被称为网格线
水平方向的叫做行线；垂直方向的叫做列线。

在两条网格线之间的空间，叫做网格轨道。
水平的叫做行轨道,垂直的叫做列轨道。


行轨道和列轨道相交的空间叫做网格单元，它们是grid布局中的最小单元。
3*3=9;我们当前有9个当个网格单元

grid-row-start和 grid-row-end

container{
    display: grid;
    border: 2px solid red;
    grid-template-columns: repeat(3, 150px);
    grid-template-rows: repeat(3, 300px);
    gap: 10px;
}
.item{
    background: pink;
}
.item-1{
    grid-row-start: 1;    /* 从第1根水平线开始 */
    grid-row-end: 3;      /* 到第3根水平线结束 */
    grid-column-start: 1; /* 从第1根垂直线开始 */
    grid-column-end: 2;   /* 到第2根垂直线结束 */
}
<div class="container">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
    <div class="item item-9">9</div>
</div>

计算过程：
水平方向（列）：第 1 根线 到 第 3 根线，跨过的格子是 (列2) 和 (列3) 之间的空隙。
因为 3 - 1 = 2，所以它占了 2 列宽（第 1 列 + 第 2 列）。

垂直方向（行）：第 1 根线 到 第 3 根线，跨过的格子是 (线2) 和 (线3) 之间的空隙。
因为 3 - 1 = 2，所以它占了 2 行高（第 1 行 + 第 2 行）

.item-1{
    grid-row-start: 1;    
    grid-row-end: 3;      
    grid-column-start: 1; 
    grid-column-end: 2;   
}

垂直方向（行）：grid-row-end(3) - grid-row-start(1) = 2。
占据第 1 行 和 第 2 行（高度共 600px + 间隙）。

水平方向（列）：grid-column-end(2) - grid-column-start(1) = 1。
只占据第 1 列（宽度 150px）。

我们发现多余的1个元素会往下排列布局

简写grid-row-start/end和 grid-column-start/end

.item-1{
    grid-row-start: 1;    
    grid-row-end: 3;      
    grid-column-start: 1; 
    grid-column-end: 2;   
}

这个写法等价于下面的

.item-1{
    grid-row: 1 / 3;     /* 从第1根水平线开始到第3根线结束，3-1=2占据2行高度 */
    grid-column: 1 / 2; /* 从第1根垂直线开始到第2根线结束，2-1章句1行的的宽度 */
}

span 2;表示从当前位置开始，占据的宽度和高度

.container{
    display: grid;
    border: 2px solid red;
    grid-template-columns: repeat(3, 150px);
    grid-template-rows: repeat(3, 300px);
    gap: 10px;
}
.item{
    background: pink;
}
.item-1{
    /* span 2;表示从当前位置开始，占据2个列的高度 */
    grid-row: span 2;    
    /*  span 3;表示从当前位置开始，占据3个行的宽度 */
    grid-column:span 3; 
}
<div class="container">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
    <div class="item item-9">9</div>
</div>

使用span的好处在于

使用span的好处在于：它描述的是占据多少单元格。
而不是在哪个具体位置。更符合我们的理解。

表占据网格占据项目的最后一条网格线

.container{
    display: grid;
    border: 2px solid red;
    grid-template-columns: repeat(3, 150px);
    grid-template-rows: repeat(3, 300px);
    gap: 10px;
}
.item{
    background: pink;
}
.item-1{
    // 其实就是“从最上面开始，往下占两行”的意思
    grid-row: 1 / -2;    
    grid-column:1 / -1; 
}

这个有点不懂

布局计算

当grid的自动布局算法为item-2寻找位置时。
它会从item-1占据空间后的，第一个可用单元格开始。

.container{
    display: grid;
    border: 2px solid red;
    grid-template-columns: repeat(3, 150px);
    grid-template-rows: repeat(3, 300px);
    gap: 10px;
}
.item{
    background: pink;
}
.item-1{
    /* span 2;表示从当前位置开始，占据2个列的高度 */
    grid-row: span 2;    
    /*  span 3;表示从当前位置开始，占据3个行的宽度 */
    grid-column:span 3; 
}
.item-2{
    grid-row: span 2;    
    grid-column:span 3; 
}
<div class="container">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
    <div class="item item-9">9</div>
</div>

为啥item-1和item-2都是设置的 grid-row: span 2; grid-column:span 3; 但是占据的空间大小不一样
因为空间不满足啦。