在下面的示例中,我想将框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>
我发现了问题所在:分号“;”box2块导致问题。