两列Grid布局下，如何让按钮紧贴左栏第一段且移动端后置

我需要将按钮放在两列Grid布局左栏的第一段文字下方，但目前右栏第二段文字较长，导致按钮上方出现间隙，想消除这个间隙。同时移动端堆叠显示时按钮必须在最后，因此不能修改HTML结构。

当前代码 #

HTML #

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

CSS #

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

当前效果 #

期望效果 #

解决方案 #

修改CSS代码，调整Grid布局的定位逻辑，同时修复语法错误：

.text {
    max-width: 600px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto; /* 行高由内容自动决定 */
    column-gap: 24px;
}
p:nth-of-type(1) {
    grid-column: 1;
    grid-row: 1; /* 左栏第一行 */
}
p:nth-of-type(2) {
    grid-column: 2;
    grid-row: 1 / span 2; /* 右栏内容跨越两行 */
}
.button {
    grid-column: 1;
    grid-row: 2; /* 左栏第二行，紧跟第一段文字 */
    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;
}

/* 移动端堆叠适配 */
@media (max-width: 768px) {
    .text {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }
    p:nth-of-type(1) {
        grid-column: 1;
        grid-row: 1;
    }
    p:nth-of-type(2) {
        grid-column: 1;
        grid-row: 2;
    }
    .button {
        grid-column: 1;
        grid-row: 3; /* 移动端按钮位于最后 */
        margin-right: unset;
        width: 100%; /* 可选：让按钮填满宽度 */
    }
}

说明 #

1. 移除了错误的grid-template-areas写法，改用grid-column和grid-row精准定位，原代码中grid-area: "a";的引号是多余的，属于语法错误。
2. 右栏第二段设置为grid-row: 1 / span 2，使其占据两行高度，左栏第一段和按钮分别占第一、第二行，按钮会自动紧贴第一段下方，不会因右栏内容过长产生间隙。
3. 移动端通过媒体查询重置Grid布局，让元素按HTML原顺序堆叠，按钮自然位于最后。

内容的提问来源于stack exchange，提问作者flks