CSS Grid 垂直展开一个元素而不影响 Row 中的其他元素

Question

我一直在使用 CSS 网格来设计不同数量的卡片的样式。每张卡片都有一个手风琴，可以切换以显示更多信息。切换后，它将展开卡片，然后将行中的卡片展开到相同的高度。有没有办法让卡片只垂直扩展，而不影响行以及行中其他卡片的高度？看看这些照片以获得更好的想法。我的直觉是，也许我应该放弃 CSS 网格，但我想看看是否可行：

这是我的网格 CSS：

.dynamicprofgrid {
  width: 100%;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-columns: .4fr 1fr;
  margin-top: 20px;
  margin-bottom: 20px
  
}


.profdatagrid {
  grid-template-columns: 1fr;
  margin: 20px
}

]

谢谢！

Answer 1

您应该将网格框定义为稳定的

width: (like 350px) !important;

，这样它就不会变得大于定义的宽度，并使用 important。