在 CSS3 网格布局期间 grid-row-start 是如何工作的？答案

【问题标题】：How does grid-row-start work during CSS3 grid layout?在 CSS3 网格布局期间 grid-row-start 是如何工作的？
【发布时间】：2020-12-01 23:12:21
【问题描述】：

当我将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>

【问题讨论】：

标签： css css-grid

【解决方案1】：

来自the specification：

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

网格位置

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

网格跨度

网格项在每个轴上占据多少个网格轨迹。网格项的网格跨度始终是确定的，如果无法为该轴确定，则在每个轴上默认为 1。

网格放置属性 - 速记 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。

【讨论】：

【解决方案2】：

为grid-row-start 指定span <integer> 只会告诉浏览器项目的起点和终点应该相距多远。它不会连续放置。

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

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

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

如果您对细节感兴趣，我建议您阅读文档。

【讨论】：