有人可以帮我用 CSS Grid 设计这个布局吗?
理论上红框应该可以想多长就多长。绿色盒子应保持相互堆叠。
红色框和绿色框的宽度应该相同,即 1/2。
我尝试过使用网格和行,这真是令人头疼。如有任何帮助,我们将不胜感激!
技巧是告诉 1 号框跨越三个网格行。
.layout {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
font-size: 3em;
font-weight: bold;
gap: 1rem;
}
.layout>* {
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
}
.layout>*:nth-child(1) {
border: 3px solid red;
color: red;
grid-row: 1 / span 3;
}
.layout>*:nth-child(2), .layout>*:nth-child(3) {
border: 3px solid green;
color: green;
}
<div class="layout">
<div>1<br><br>1<br><br>1<br><br>1</div>
<div>2</div>
<div>3</div>
</div>