如何将三个 div 设置为一行中的两列？

Question

.outer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 24px;
  row-gap: 24px;
}

.container {
  padding: 24px;
  border: 1px solid black;
}

.title {
  font-weight: bold;
  font-size: 1.2em;
  margin-bottom: 12px;
}

.button {
  display: inline-block;
  padding: 12px;
  background-color: lightgray;
  border: 1px solid darkgray;
}


/* flex/grid properties */

.container {}

.title,
.description {}

.button {}

<div class="outer-grid">
  <div class="container">
    <div class="title">Title of Element</div>
    <div class="description">This is the description of the element.</div>
    <a class="button">Button</a>
  </div>
  <div class="container">
    <div class="title">Title of Element</div>
    <div class="description">This is the description of the element.</div>
    <a class="button">Button</a>
  </div>
</div>

我似乎找不到任何人在网上使用 css-grid 或 flexbox 解决我的布局问题，所以我希望这里有人可以帮助我。我已经尝试了一些网格和柔性的东西，但无法让它正常工作。要么这是不可能的，要么我显然错过了一些非常简单的事情。我尝试设置样式的标记可以在以下代码笔中找到。 标记不能更改；只有CSS。

• 目标代码：https://codepen.io/u1138/pen/JjzpzMb
• 布局目标（使用表格）：https://codepen.io/u1138/pen/MWxQxEN

如何设置上面链接的目标代码的样式，使其与上面链接的布局目标具有相同的布局？对于这里的范围，我询问的是容器（盒子）和内部三个元素：标题、描述和按钮。标题和描述需要位于第一列，而按钮需要位于第二列，如果展开，则垂直居中于第一列。

提前感谢您的帮助！

Answer 1

.outer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 24px;
  row-gap: 24px;
}

.container {
  padding: 24px;
  border: 1px solid black;
  
}

.title {
  font-weight: bold;
  font-size: 1.2em;
  margin-bottom: 12px;
}

.button {
  display: inline-block;
  padding: 12px;
  background-color: lightgray;
  border: 1px solid darkgray;
  
}

/* flex/grid properties */
.container {
  display: grid;
  grid-auto-flow: dense;
}

.title,
.description {
  grid-column: 1 / 3;
}

.button {
  grid-column: 3 / 3;
}