使用Grid实现行内卡片拉伸填充剩余空间

核心调整方向 #

• 用媒体查询精准控制不同屏幕尺寸的Grid列布局，满足宽/中/小屏的排版需求
• 给"最受欢迎"的Checking卡设置专属样式，让它在中屏时占满整行
• 保留subgrid特性，确保所有卡片的上下区域垂直对齐
• 修复卡片换行后右侧留空的问题

修改后的CSS代码 #

/* 基础Grid容器配置 */
.list-grid {
    display: grid;
    gap: 20px;
    grid-template-rows: auto auto;
}

/* 宽屏（≥1024px）：A(B)C三卡并排 */
@media (min-width: 1024px) {
    .list-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 中屏（768px-1023px）：Checking卡占整行，Savings和Expanded Checking并排 */
@media (min-width: 768px) and (max-width: 1023px) {
    .list-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .card.most-popular-card {
        grid-column: 1 / -1; /* 占满当前行所有列 */
    }
}

/* 小屏（<768px）：所有卡片垂直单列排列 */
@media (max-width: 767px) {
    .list-grid {
        grid-template-columns: 1fr;
    }
}

/* 卡片继承父容器的行轨道，实现subgrid对齐 */
.list-grid > .card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    position: relative; /* 为顶部标签提供定位基准 */
}

.list-grid > .card > div:nth-child(1) {
    border-bottom: 2px solid;
    border-image: var(--secondary-accent-border-gradient) 1;
    padding-bottom: 10px;
}

/* 优化最受欢迎标签的定位 */
.most-popular {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%); /* 水平居中+向上偏移 */
    border: 2px solid var(--secondary-accent-hover);
    border-radius: 5px;
    background-color: var(--primary-accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 70%;
    min-width: fit-content;
}

.most-popular > h3 {
    color: var(--accent-text-color);
}

.account-plan-desc-list {
    width: 90%;
    margin-inline: auto;
}

修改后的HTML代码 #

<div class="center-content" style="margin-top: 20px; margin-bottom: 35px;">
    <div class="list-grid center-content" style="width: 80%; height: 100%;">
        <div class="card">
            <div>
                <h1 class="card-title">Savings</h1>
                <div class="account-plan-desc-list">
                    <p class="check-mark">Good interest rate (4.20% per month)</p>
                    <p class="x-mark">Low § maximum (§150,000)</p>
                    <p class="x-mark">Only one account allowed</p>
                    <p class="x-mark">Not free</p>
                </div>
            </div>
            <div>
                <h2><span class="descriptor">from </span>§50.00<span class="descriptor">/account</span></h2>
                <button class="btn fill-area-horiz" id="addToProfileSavings" style="margin-top: 10px;">
                    <h1><i class="fa-solid fa-plus"></i> Add to Profile</h1>
                </button>
            </div>
        </div>

        <!-- 给Checking卡添加专属类，用于中屏布局控制 -->
        <div class="card most-popular-card">
            <div>
                <div class="most-popular">
                    <h3><span class="nowrap"><i class="fa-solid fa-star"></i> MOST</span> <span class="nowrap">POPULAR <i class="fa-solid fa-star"></i></span></h3>
                </div>
                <h1 class="card-title">Checking</h1>
                <div class="account-plan-desc-list">
                    <p class="check-mark">Collect an interest each month (<span class="descriptor">from </span>0.03%<span class="descriptor">/month</span>)</p>
                    <p class="check-mark">Decent § maximum (§250,000)</p>
                    <p class="check-mark">Free</p>
                    <p class="x-mark">Only one account allowed</p>
                </div>
            </div>
            <div>
                <h2>Free</h2>
                <button class="btn fill-area-horiz" id="addToProfileChecking" style="margin-top: 10px;">
                    <h1><i class="fa-solid fa-plus"></i> Add to Profile</h1>
                </button>
            </div>
        </div>

        <div class="card">
            <div>
                <h1 class="card-title">Expanded Checking</h1>
                <div class="account-plan-desc-list">
                    <p class="check-mark">Collect an interest each month (<span class="descriptor">from </span>0.04%<span class="descriptor">/month</span>)</p>
                    <p class="check-mark">As many accounts as you would like</p>
                    <p class="check-mark">Very large § maximum (§1,000,000)</p>
                    <p class="x-mark">Not free</p>
                </div>
            </div>
            <div>
                <h2><span class="descriptor">from </span>§10,000.00<span class="descriptor">/account</span></h2>
                <button class="btn fill-area-horiz" id="addToProfileExChecking" style="margin-top: 10px;">
                    <h1><i class="fa-solid fa-plus"></i> Add to Profile</h1>
                </button>
            </div>
        </div>
    </div>
</div>

关键细节说明 #

1. 布局控制逻辑：

   • 宽屏直接用3列等宽布局，满足三卡并排需求
   • 中屏切换为2列，通过grid-column: 1 / -1让Checking卡占满整行，另外两卡自动填充下一行的两列
   • 小屏用1列布局，所有卡片垂直排列，自动占满整行宽度

2. Subgrid对齐实现：
   每个卡片设置grid-template-rows: subgrid和grid-row: span 2，继承父容器的两行轨道，确保所有卡片的标题描述区、价格按钮区在垂直方向完全对齐，不会出现错位。

3. 顶部标签优化：
   利用position: absolute和transform让标签居中悬浮在卡片上方，既不占用卡片内部空间，也不会破坏Grid的整体布局结构。

4. 空隙问题解决：
   替换原有的auto-fit规则，改用媒体查询明确列数，确保任何屏幕尺寸下，单个卡片都能自动填充所在行的全部宽度，不会出现右侧留空的情况。

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