CSS Grid布局如何将首个网格项放置到整行末尾？

问题现象 #

使用CSS Grid实现购物车行布局时，除删除按钮外其余元素排布正常。删除按钮设置右对齐属性后，仅能对齐到自身所在网格列的末尾，无法到达整行最右侧标记位置。

原有代码 #

HTML结构

<div class="basket-row">
    <div class="basket-image">
        <img src="@url" />
    </div>
  
    <div class="basket-content">
        <div>
            <a href="#" class="icon icon-small icon-remove"></a>
        </div>
        <div class="title">
            <span>Jane Austen - I'm a very long title, aka product name</span>
        </div>

        <div class="stock grid-stock">
            <i class="icon icon-small icon-status-green"></i>
            In warehouse
        </div>

        <div class="basket-buttons input-group">
            <div class="quantity-group">
                <span>@price</span>

                <div class="quantity">
                    <a href="#" class="button">
                        <i class="icon icon-small icon-subtract"></i>
                    </a>

                    <input type="text" value="@quanity" class="input" />

                    <a href="#">
                        <i class="icon icon-small icon-add"></i>
                    </a>
                </div>
            </div>
            <div class="price">
               50 EU
            </div>
        </div>
    </div>
</div>

CSS样式

.basket-row {
    display: grid;
    grid-gap: 16px;
    grid-template-columns: 70px 1fr;
    border-bottom: 1px solid #ebe5e8;
    padding: 16px;
}
.basket-row .basket-image {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.checkout .basket-row .basket-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
}
.checkout .basket-row .basket-content .title {
    grid-column: 1 / span 2;
}
.basket-row .title {
    grid-template-columns: 1fr 28px;
}

.basket-row .stock {
    display: flex;
    column-gap: 6px;
    padding: 10px 0;
}
/* 原有代码此处存在语法错误，缺少选择器 */
display: grid;
    grid-template-columns: 3fr 1fr;
    column-gap: 8px;
}

问题原因 #

1. .basket-content被设置为1fr 2fr的两列网格，删除按钮放在独立的第一列div容器中，受网格列边界限制，右对齐最多只能贴合第一列的右边缘，无法延伸到整行末尾。
2. 原有CSS存在语法错误：.basket-row .title只设置了grid-template-columns属性但没有声明display: grid，该网格规则未生效；最后一段网格样式缺少对应选择器，样式完全失效。

可行解决方案 #

方案1：调整网格列划分（DOM结构改动少） #

调整.basket-content的网格列规则，新增固定宽度的删除按钮列，明确每个子元素的网格占位：

.checkout .basket-row .basket-content {
    display: grid;
    /* 改为三列：内容自适应列 + 固定宽度按钮列 + 价格操作列 */
    grid-template-columns: 1fr auto 2fr;
    gap: 8px 16px;
}
/* 删除按钮容器放置在最右列，内容右对齐 */
.checkout .basket-row .basket-content > div:first-child {
    grid-column: 3;
    display: flex;
    justify-content: flex-end;
}
/* 标题跨全部三列占满整行 */
.checkout .basket-row .basket-content .title {
    grid-column: 1 / span 3;
}
/* 库存信息放在第一列 */
.checkout .basket-row .basket-content .stock {
    grid-column: 1;
}
/* 底部按钮操作区跨全部三列，补全原有缺失的选择器 */
.checkout .basket-row .basket-content .basket-buttons {
    grid-column: 1 / span 3;
    display: grid;
    grid-template-columns: 3fr 1fr;
    column-gap: 8px;
}

方案2：将删除按钮移入标题容器（整体改动量最小） #

利用原有写好但未生效的标题网格规则，把删除按钮移到标题容器内，不需要调整外层网格列数：

1. 修改HTML结构，将删除按钮移入.title容器：

<div class="title">
    <span>Jane Austen - I'm a very long title, aka product name</span>
    <a href="#" class="icon icon-small icon-remove"></a>
</div>

2. 补全CSS样式让网格规则生效：

.basket-row .title {
    /* 补全display声明，让网格规则生效 */
    display: grid;
    grid-template-columns: 1fr 28px;
    align-items: start;
}
/* 删除按钮对齐到单元格最右 */
.basket-row .title .icon-remove {
    justify-self: end;
}
/* 补全原有缺失的选择器 */
.basket-row .basket-buttons {
    display: grid;
    grid-template-columns: 3fr 1fr;
    column-gap: 8px;
}

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