css - 缩小 CSS 网格单元的宽度以为侧边栏腾出空间

Question

我有一个两列的网格布局，我正在努力实现想要的效果。 block A 是固定大小的。 Block B 是固定宽度的，但它的高度可以根据内容变化。而C block 是固定高度的。这是 B 展开时的当前样子:

A A B
A A B
C C C

 -->

A A B
A A B
    B
C C C

但是，我想要实现的是，一旦 B 变得比 A 高，C 也应该收缩到 A 的宽度，以便 B 可以自由生长。

A A B
A A B
C C C

 -->

A A B
A A B
C C B

这有可能通过 CSS grid/flexbox/两者的组合来实现吗？我可以完全控制标记和 CSS，因此我可以根据需要更改它们。

Answer 1

我认为这不是您 100% 想要的，但它可能会起作用。这是使用 css 网格和位置完成的:相对于重叠“C”。 看看下面的代码:

.container{
	display: grid;
	grid-template-columns: repeat(3,1fr);
	grid-template-rows: 20vh 20vh 20vh;
	grid-column-gap: 20px;
	grid-row-gap: 20px;
}

.grid-item:nth-of-type(1){
	grid-column: 1/3;
	grid-row: 1/3;
	background: green;
}

.grid-item:nth-of-type(2){
	grid-column: 3;
	grid-row: 1/-1;
	background: pink;
	position: relative;
	height: calc(60vh + 40px);
}

.grid-item:nth-of-type(3){
	grid-column: 1/-1;
	grid-row: 3;
	background-color: red;
}

<div class="container">
		<div class="grid-item">A</div>
		<div class="grid-item">B</div>
		<div class="grid-item">C</div>
	</div>