为什么第三个css网格列从这个codepen中的第二行开始

Question

链接到代码笔https://codepen.io/Pyoss/pen/ExRXVOZ `

<div class="example_grid">
    <div class="grid-main-element grid-center"></div>
    <div class="grid-element grid-left"></div>
    <div class="grid-element grid-left"></div>
    <div class="grid-element grid-right"></div>
    <div class="grid-element grid-right"></div>
    
    
</div>

`

.example_grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 
}

.example_grid>div {
    border: 1px solid white;
}

.grid-left {
    grid-column: 1;
    background-color: red;
}

.grid-center {
    grid-column: 2;
    grid-row-start: 1;
    grid-row-end: 3;
    background-color: yellow;
}

.grid-right {
    grid-column: 3;
    background-color: blue;
}


.grid-element {
    height: 100px;
}

.grid-main-element {
    height: 200px;
}

``

我可以手动分配行和列，但我不明白这种行为背后的逻辑。我预计分配的列会占用可用的最高行，但它会在最右边的列上产生一行顶部偏移。

Answer 1

这是因为默认情况下，网格具有grid-auto-flow: row。它控制自动放置的项目如何流入网格。

More on this

如果将grid-auto-flow: row dense 或grid-auto-flow: column 分配给网格，则右列将从顶行开始。

例子：

.example_grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: row dense;
}