同一网格区域中的多个网格子项

Question

我想创建一张非常简单的卡片，仅包含一张图像、一个段落和两个按钮。

见下图：

我要创建的卡片：

<div class="container">
  <img src="" alt="">
  <p></p>
  <button></button>
  <button></button>
</div>

.container{  
  padding: 2rem;
  grid-template-columns:[img-start] 120px [img-end content-start] 1fr [content-end];
  grid-column-gap: 1.6rem;
  grid-template-rows: repeat(2, auto)
}

然后我放置按钮：

button{
  grid-column: content;
  grid-row: 2/3;
}

.container {
  padding: 2rem;
  grid-template-columns: [img-start] 120px [img-end content-start] 1fr [content-end];
  grid-column-gap: 1.6rem;
  grid-template-rows: repeat(2, auto)
}

button {
  grid-column: content;
  grid-row: 2/3;
}

<div class="container">
  <img src="" alt="">
  <p></p>
  <button></button>
  <button></button>
</div>

但是，这些按钮重叠并且彼此不相邻，所以我想知道是否有一种方法可以将多个网格项放置在正常的网格区域中，并说该区域就像一个弹性行包装器？

非常感谢！

我会使用带有一些包裹按钮的 div 的 Flexbox，并将此 div 分配到网格区域内，但我想使用网格来获取此 CSS 属性的知识。所以我想知道是否有一种原生网格方式可以做到这一点？

Answer 1

正如

@Chris Barr

提到的，当内容均匀分布为列和行时，CSS 网格布局非常有用。在这种情况下，您可以使用如下所述的Flex。

.container {
  display: flex;
  flex-direction: row;
  padding: 10px;
  border: 1px solid #000;
  width: 500px;
}

.thumbnail {
  width: 150px;
}

.content {
  padding-left: 10px;
}

<div class="container">
  <img src="https://shorturl.at/aceI2" alt="" class="thumbnail">
  <div class="content">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem diam, egestas at ipsum nec, luctus molestie turpis. Proin tempus sagittis lobortis. Ut nec velit ac odio eleifend semper.
    </p>
    <button>Button 1</button>
    <button>Button 2</button>
  </div>
</div>