如何使用 flex 或 css-grid 将三个 div 设置为两列？

Question

[作者：抱歉，有人编辑了我的内容并删除了我已经尝试过的内容。我正在寻找 flex 或 css-grid 答案。请不要改变我的措辞——改进我的格式很好并且值得赞赏。]

我已经尝试过一些 css-grid 和 flex 布局，但没有一个起作用。 CSS 网格不会让按钮在第一列的中间垂直对齐，而且我无法弄清楚如何让 flex 来布局元素，如下面链接的布局目标所示。我没有在网上看到任何其他解决方案以及与下面链接的目标非常相似的布局示例。任何建议表示赞赏。预先感谢！

我尝试设置样式的标记可以在下面以及下面的 CodePen 演示中找到。 标记不能更改；只有 CSS。 我也不想从外部网格继承任何网格样式。

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

.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>

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

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;
}

<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 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>