两列网格中左列第一个文本正下方的按钮

Question

如何将按钮直接放置在第一列第一段的下方？我知道这是由于第二段较长造成的，但我想避免出现间隙。

由于我希望按钮位于移动设备上的最后（全部堆叠），所以我不能真正在 HTML 中移动它。

.text {
    max-width: 600px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: "a b" "c b";
    /* grid-auto-rows: minmax(min-content, max-content); this doesn't work either */
    column-gap: 24px;
}
p:nth-of-type(1) {
    grid-area: "a";
}
p:nth-of-type(2) {
    grid-area: "b";
}
.button {
    grid-area: "c";
    display: inline-flex;
    margin-right: auto;
    justify-content: center;
    align-items: center;
    height: 40px;
    padding: 0 24px;
    text-decoration: none;
    color: white;
    background: gray;
    border-radius: 6px;
}

<div class="text">
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore, porro mollitia. Tenetur quibusdam at voluptate aut expedita!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, est asperiores maxime id architecto libero commodi, corrupti sit iusto deserunt quos! Ipsa inventore soluta laudantium repellat culpa! Incidunt, quam eos.</p>
    <a href="#" class="button">Click me</a>
</div>

我现在得到的： 我想要的是：

Answer 1

这是移动优先的设计方法：

.text {
  max-width: 600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "a" "b" "c";
  column-gap: 24px;
}

p:nth-of-type(1) {
  grid-area: a;
}

p:nth-of-type(2) {
  grid-area: b;
}

.button {
  grid-area: c;
  display: inline-flex;
  margin-right: auto;
  justify-content: center;
  align-items: center;
  height: 40px;
  padding: 0 24px;
  text-decoration: none;
  color: white;
  background: gray;
  border-radius: 6px;
}


/* For non-mobile: */

@media (min-width: 500px) {
  .text {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: "a b" "c b";
  }
}

<div class="text">
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore, porro mollitia. Tenetur quibusdam at voluptate aut expedita!</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, est asperiores maxime id architecto libero commodi, corrupti sit iusto deserunt quos! Ipsa inventore soluta laudantium repellat culpa! Incidunt, quam eos.</p>
  <a href="#" class="button">Click me</a>
</div>

^{根据需要更改宽度。我将其设置为}

500px

专门针对此示例作为 SO 片段。