如何在CSS网格布局中实现堆叠

Question

我想从CSS大师那里得到一些帮助。我需要做一个网格布局，其中有3div内的网格。第一个div占宽度的2/3，是另外两个div的2倍高。其他两个div需要各占1/3，因此应该在剩下的1/3中堆叠在一起。

协助吗?

Answer 1

所以这段代码应该可以正常工作。

body { margin: 0 } body > * { height: 100vh }
.grid {
display: grid;
grid-template-areas:
"lg lg sm1"
"lg lg sm2"
}
.grid > div { border: 1px solid grey }
.lg { grid-area: lg }
.sm1 { grid-area: sm1 }
.sm2 { grid-area: sm2 }

<div class="grid">
<div class="lg">Large</div>
<div class="sm1">Small 1</div>
<div class="sm2">Small 2</div>
</div>

否则，跳到一个网格布局构建器上，看看你是如何得到的。我已经为你建立了一个例子https://grid.layoutit.com/?id=TtnKCtI