使用grid-area时，结合minmax()的响应式Grid布局失效问题

预期实现效果 #

我需要实现一个三列两行的响应式Grid布局，最后一列跨两行显示图片，具体效果如下：

• 平板端：图片移至底部行
  
• 移动端：所有元素单列显示
  

尝试方案与问题 #

我尝试用grid-template-area规划Grid子元素位置，结合minmax()实现响应式布局，但布局完全没有响应效果。希望尽量不通过媒体查询解决该问题。

当前问题表现：

问题分析 #

问题出在grid-area的使用上：grid-area固定了子元素的位置与尺寸，和minmax()的自动换行逻辑冲突。比如.services .service1 { grid-area: 1 / 1; }把元素钉死在第一行第一列，但minmax(300px, 1fr)希望宽度不足时元素换行到第二行第一列，两者无法兼容。

想请教：如何在控制Grid子元素位置的同时实现响应式布局？我感觉minmax()和grid-area结合根本达不到目标。

代码片段 #

HTML代码 #

<div class="services container">
    <div class="service1">
        <i class="fa-solid fa-palette fa-2x"></i>
        <h4>Graphic Design</h4>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, velit? Inventore voluptas quis eveniet
            expedita numquam pariatur tempora, praesentium laudantium ad, porro reprehenderit repellat aut
            perspiciatis, unde optio odio ab.</p>
    </div>
    <div class="service2">
        <i class="fa-solid fa-gem fa-2x"></i>
        <h4>Web Design</h4>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente harum a illo voluptatum facere
            repudiandae voluptates optio deleniti tenetur vel accusantium sequi minima, odio minus eius veritatis
            obcaecati. Natus, similique?</p>
    </div>
    <div class="service3">
        <i class="fa-solid fa-pen-ruler fa-2x"></i>
        <h4>UI and UX</h4>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis culpa minima hic est laborum
            necessitatibus rerum quidem, commodi quas iusto. Odio fuga cum perspiciatis delectus fugit quisquam
            voluptate quos rem.</p>
    </div>
    <div class="service4">
        <i class="fa-solid fa-code fa-2x"></i>
        <h4>Web Development</h4>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Recusandae, consequatur reiciendis officia
            pariatur culpa nam tempore, dolores rem nesciunt nobis, exercitationem dolorum. Culpa, commodi facere?
            Nihil fugit id expedita laborum.</p>
    </div>
    <div class="image"><img src="assets/images/services.jpg" alt="services"></div>
</div>

CSS代码 #

.services {
    display: grid;
    grid-template-areas:
        '. card1 card2 image . '
        '. card3 card4 image . ';
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    row-gap: 2rem;
    align-content: center;
    padding-block: 5rem;
}

.services .service1 {
    grid-area: card1;
}

.services .service3 {
    grid-area: card2;
}

.services .service2 {
    grid-area: card3;
}

.services .service4 {
    grid-area: card4;
}

.services .image {
    position: relative;
    grid-area: image;
    width: 100%;
    max-width: 800px;
    display: block;
    margin: auto;
    height: auto;
    object-fit: cover;
}

.services .image::before {
    content: "";
    position: absolute;
    display: inline-block;
    background-color: #292a2f;
    border: #10cab7 2px solid;
    top: -11%;
    left: 65%;
    width: 167px;
    height: 585px;
    z-index: -1;
}

/* grid children are also displayed with grid */
.services>div {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 50px max-content;
    align-items: start;
}

解决方案 #

你的判断没错，grid-template-areas是静态布局方案，和auto-fit/minmax()的动态列逻辑完全冲突——前者强制元素固定在指定区域，后者需要根据容器宽度自动增减列数，两者无法共存。要实现无媒体查询的响应式布局，得换一种Grid写法：

核心思路 #

1. 放弃grid-template-areas，改用隐式网格+grid-column/grid-row的条件式定位
2. 用minmax()定义基础列宽，让Grid自动调整列数
3. 给图片元素设置grid-row: span 2，但仅在容器足够宽（能放下3列）时生效；宽度不足时，图片自动占满整行

修改后的CSS代码 #

.services {
    display: grid;
    /* 基础列：最小300px，自动适配列数；添加gap控制间距 */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    align-content: center;
    padding-block: 5rem;
}

/* 图片元素：默认占1行，容器足够宽时跨2行并放在最后一列 */
.services .image {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: auto;
    height: auto;
    object-fit: cover;
    grid-column: -2 / -1;
    grid-row: span 2;
}

/* 子元素内部布局保留原逻辑 */
.services>div {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 50px max-content;
    align-items: start;
}

.services .image::before {
    content: "";
    position: absolute;
    background-color: #292a2f;
    border: #10cab7 2px solid;
    top: -11%;
    left: 65%;
    width: 167px;
    height: 585px;
    z-index: -1;
}

效果说明 #

• 桌面端：容器宽度足够放下3列时，4个卡片占前2列的2行，图片占第3列并跨2行，符合目标布局
• 平板端：容器宽度只能放下2列时，4个卡片占满前2行（每行2个），图片自动换行到第3行占满整列，符合平板端需求
• 移动端：容器宽度不足300px时，所有元素自动单列显示，符合移动端需求

补充优化 #

如果需要严格控制卡片的排列顺序（比如service1和service2在上行，service3和service4在下行），可以给卡片添加grid-column的顺序控制，但依赖Grid的自动流特性即可满足大部分场景。

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