如何扩展网格的兄弟元素？答案

【问题标题】：How to expand a sibling element of a grid?如何扩展网格的兄弟元素？
【发布时间】：2021-09-29 18:23:51
【问题描述】：

我有一个以网格布局显示的卡片列表。当我点击其中一张卡片时，会出现一个 div，显示详细信息。

此详细信息元素应至少为 300 像素并占用所有空间，但我的卡片应尽可能多地显示，如果可能每行占用超过 1 个。


    .parent {
      width: 100%;
      gap: 10px;
      display:flex;
    }
    
    .container {
      grid-template-columns: repeat(auto-fit, minmax(100px, 200px));
      grid-auto-rows: min-content;
      gap: 10px;
      display: grid;
      flex-grow: 1;
      align-items: flex-start;
    }
    
    .card {
      height: 30px;
      background: red;
    
    }
    
    .detail {
      min-width:300px;
      flex-grow:1;
      background: blue;
      height: 200px;
    
    }

【问题讨论】：

如果让两个列的元素都展开，会更容易，可能有点相似：jsfiddle.net/z4tvamy3
不知道夹具。谢谢。但我的网格项目有固定大小
这里是另一种方法（减去标题），您也可以从中激发灵感：stackoverflow.com/questions/58897450/…（缩小到 2col codepen.io/gc-nomade/details/xxxmGNE 或单个 codepen.io/gc-nomade/pen/qBOPgpX

标签： css flexbox css-grid

【解决方案1】：

在这里

.parent {
    width: 100%;
    display:flex;
}

并从 ,card 中移除 flex-grow

https://jsfiddle.net/xbc2vdg9/

【讨论】：

谢谢。但是这样，当显示详细信息时，我们只有一列卡片，还有更多空间。