css - CSS网格帮助制作2对1的列

Question

我被CSS问题困住了。我有需要在 1 / 2 / 1 列上制作的 elementor 博客模板。见附在照片上。我用 :nth-child(3) & :nth-child(4) 做了 50%，但我不能让它们在同一行。

我找到了其他方法来制作它：display: flex; flex-wrap: wrap;但它们是右侧的空间，我无法删除。请帮助解决这个问题:)

标签： cssflexboxcss-grid

Answer 1

这是你想要的吗？

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
    padding: 10px;
}
.grid__item {
    background-color: lightblue;
    padding: 10vh 0;
    text-align: center;
}

.grid__item:nth-child(1) {
    grid-row: 1/2;
    grid-column: 2/4;
}

.grid__item:nth-child(2) {
    grid-column: 2/3;
}
.grid__item:nth-child(4) {
    grid-column: 2/4;
}

<section class="grid">
    <div class="grid__item">1</div>
    <div class="grid__item">2</div>
    <div class="grid__item">3</div>
    <div class="grid__item">4</div>
</section>