在CSS3网格布局期间，grid-row-start如何工作？

问题描述

当我将grid-row-start: <integer>应用于第三个网格项目时，它位于网格的左侧。

当我应用grid-row-start: span <integer>时，它不在左侧。

当grid-row-start仅给出整数时，为什么网格项位于左侧的单元格中？

.container {
    display: grid;
    width: 100%;
    height: 200px;
    background: #ececec;
    grid-template-columns: [col1-st] 1fr [col1-en col2-st] 1fr [col2-en col3-st] 1fr [col3-en];
    grid-template-rows: [row1-li] 1fr [row2-li] 1fr [row3-li] 1fr [row4-li];
}

.container div {
    padding: 4px;
    text-align: center;
    background: #ececec;
    Box-sizing: border-Box;
    border: 1px solid #aaa;
}

.container .rBg {
    background: #e02323;
}

.container .gridRowStNumber {
    grid-row-start: 1;
}

.container .gridRowStString {
    grid-row-start: row4-li;
}

.container .gridRowStSpan {
    grid-row-start: span 2;
}

<div class="container">
    <div>aaa</div>
    <div>bbbb</div>
    <div class="rBg gridRowStNumber">cccccc</div>
    <div>ddd</div>
    <div>eeee</div>
    <div>ff</div>
</div>

解决方法

来自the specification：

网格项目网格区域在网格中的位置由其位置定义，该位置由网格位置和网格跨度组成：

网格位置

每个轴上网格项目在网格中的位置。网格位置可以是确定的（明确指定）或自动的（由自动放置确定）。

网格跨度

每个轴上网格项占用多少个网格跟踪。网格项的网格跨度始终是确定的，如果无法通过其他方式确定该轴的网格跨度，则默认为1。

grid-placement属性-长手的grid-row-start，grid-row-end，grid-column-start，grid-column-end及其速记grid-row，grid-column和grid-area -允许作者通过提供以下六项信息中的任何一项（或不提供）来指定网格项目的位置：

然后，如果您继续阅读，将会看到不同的情况。要使用简单的单词进行解释，您有4种情况

• 您指定一个数字，该数字定义位置和跨度将等于1。在这种情况下，您定义grid-row-start: 1;将使元素在第一列的位置。
• 您指定了一个定义跨度和位置的数字将是自动的。在这种情况下，您定义grid-row-start: span 1;可使元素占据一列但会自动放置。
• 您同时指定位置和跨度，此处需要使用*-start和*-end
• 您什么都不输入，位置将是自动的，并且跨度等于1。

,

为span <integer>指定grid-row-start仅告诉浏览器该项目的开始和结束边缘应相距多远。它不会连续放置。

您可以在此处了解有关放置算法的信息：https://drafts.csswg.org/css-grid/#auto-placement-algo

简而言之，如果用grid-row-start: <integer>指定了该行，则算法会尝试将其放置在最开始的可用列中。

对于具有未指定行和列的元素，该算法按文档顺序处理它们（默认情况下），并将它们放置在从上到下（从左至右）（默认是agian）的未占用单元格中。

如果您对技巧很感兴趣，我建议阅读文档。