css - 为第 2/5 行指定的网格行，但未按预期工作，仅填写 1 行

Question

在以下示例中，我想将框 4 拉伸到第 2-3-4 行。我使用了选项“grid-row: 2/5;”，但它没有按预期工作，只填写了一行：2/3。

代码在这里：

<style>
    .wrapper {
        display: grid;
        grid-template-columns: 1fr 2fr 2fr 1fr;
        grid-gap: 1em;
        grid-auto-rows: minmax(100px, auto);
    }
    .wrapper > div {
        background-color: #ddd;
        padding: 1em;
        border: black 1px solid
    }

    .box1 {
        grid-column: 1/5;
    }
    .box3 {
        grid-column: 2/4;
        grid-row: 2/3
    }
    .box2 {
        grid-row: 2/6;
    };
    .box4 {
        grid-row: 2/5;
        grid-column: 4/5;
    }
    .box7 {
        grid-row: 4/5;
        grid-column: 2/4;
    }
    .box8 {
        grid-row: 5/6;
        grid-column: 2/5;
    }
</style>

和身体在这里：

<div class="wrapper">
    <div class='box1'>1</div>
    <div class='box2'>2</div>
    <div class='box3'>3</div>
    <div class='box4'>4</div>
    <div class='box5'>5</div>
    <div class='box6'>6</div>
    <div class='box7'>7</div>
    <div class='box8'>8</div>

</div>

标签： cssgridview

Answer 1

我发现了问题所在：分号 ';' 在 .box2 块导致问题之后。