position - 如何在没有网格模板行的网格堆栈中创建行？

Question

我正在尝试在网格中很好地制作.item-1和.item-2堆叠，就像在这个片段中一样：

.grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto 1fr;
}

.item {
    padding: 10px;
    border: 1px solid black;
}

.item-1 {
    grid-column: 1 / 3;
}

.item-2 {
    grid-column: 1 / 3;
}

.item-3 {
    grid-column: 3 / 7;
    grid-row: 1 / 3;
    
    padding: 80px 20px;
}

<div class="grid">
    <div class="item item-1">
        item-1
    </div>
    
    <div class="item item-2">
        item-2
    </div>
    
    <div class="item item-3">
        item-3
    </div>
</div>

这是一个简化的例子，我坚持的实现在不同的地方有更多的项目行。
例如：大项目优先，或根本没有大项目。

这就是为什么grid-template-rows似乎不在桌面上，我找不到一种方法来很好地堆叠它们。

我尝试了很多不同的东西，从grid-auto-rows各种grid-*andalign-*到 height 和 margin 设置为autoand fit-content，但没有成功。

这是没有 的相同片段grid-template-rows，您可以在其中看到默认行为.item-1和.item-2被分离/获得相同高度：

.grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(6, 1fr);
}

.item {
    padding: 10px;
    border: 1px solid black;
}

.item-1 {
    grid-column: 1 / 3;
}

.item-2 {
    grid-column: 1 / 3;
}

.item-3 {
    grid-column: 3 / 7;
    grid-row: 1 / 3;
    
    padding: 80px 20px;
}

<div class="grid">
    <div class="item item-1">
        item-1
    </div>
    
    <div class="item item-2">
        item-2
    </div>
    
    <div class="item item-3">
        item-3
    </div>
</div>

这是片段的图像，显​​示了所需的布局：

Answer 1

尝试这个

.grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10px;
}

.item {
    border: 1px solid #000;
    padding: 10px;
}

.box1 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.item2 {
    flex: 1;
}

.item3 {
    padding: 80px 20px;
}

<div class="grid" >
    <div class="box1">
        <div class="item" >item 1</div>
        <div class="item item2" >item 2</div>
    </div>
    <div class="item item3" >item 3</div>
</div>

Answer 2

.grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10px;
}

.item {
    border: 1px solid #000;
    padding: 10px;
}

.box1 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.item1 {
    flex: 1;
}

.item2 {
    flex: 1;
}

.item3 {
    padding: 80px 20px;
}

<div class="grid" >
    <div class="box1">
        <div class="item item1" >item 1</div>
        <div class="item item2" >item 2</div>
    </div>
    <div class="item item3" >item 3</div>
</div>