如何将网格项的子项设置为单行两列？

Question

我尝试设置样式的标记可以在下面以及下面的 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>