提问者:小点点

网格-为第2/5行指定的行,但未按预期工作,只填写1行[已关闭]


在下面的示例中,我想将框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>

共1个答案

匿名用户

我发现了问题所在:分号“;”box2块导致问题。