在CSS网格中环绕最高子节点的容器

Question

我想我可能在这个设计问题上有错误的方法。以下是该问题的副本和堆栈代码片段:

Codepen

body {
display: flex;
justify-content: center;
}
.main-container {
background-color: grey;
width: 1000px;
display: grid;
grid-template-areas: "img description" "share share";
grid-template-columns: 271px 1fr;
}
.img-meta {
grid-area: img;
width: 272px;
align-self: center;
position: relative;
}
.red {
width: 272px;
height: 380px;
background-color: red;
}
.green {
background-color: green;
height: 150px;
align-self: center;
}
.blue {
background-color: blue;
position: absolute;
padding-top: 10px;
height: 100px;
width: 272px;
}

<div class="main-container">
<div class="img-meta">
<div class="red"></div>
<div class="blue"></div>
</div>
<div class="green"></div>
</div>

问题很明显:蓝色容器脱离了父网格容器。绿色容器包含文本，并根据所述文本的数量展开，这是我们想要的。红色容器具有固定的尺寸，并且包含一个图像，该图像需要始终将自己定位在绿色容器的中心。无论红色容器的位置如何，蓝色容器必须位于红色容器的正下方。

当文本长度大于img-meta容器时，设计符合预期。但是当文本比img-meta短时，其设计就像代码片段所示:因为蓝色的容器是相对定位的，所以它脱离了文档的流，而灰色的网格容器没有围绕它。

我知道这是一个相对定位的容器的正常行为，但我没有想法得到预期的设计。在选择网格之前，我最初尝试用flexboxes来设计这个。我试图在文本容器上使用min-height来强制它始终具有img-meta容器的高度，但没有运气，因为它会在顶部创建很多空白空间。我也试过让蓝色容器脱离它的父容器，并移除它的位置，以便让网格环绕它，但这将在红色和蓝色容器之间留下一个空间!

也许网格的方向对这种类型的设计是错误的，我期待看到你的想法!

Answer 1

我选

.blue { 
position: absolute; 
width: 100%;
height: 100%;
}
.grey {
position: relative;
display: flex;
align-items: center;
}