CSS Grid两栏div无图片内容时如何避免预留空白空间？

问题背景 #

• 开发场景：基于PHP/HTML搭建集成数据库的学校课程项目网站，需要实现部分页面展示侧边图片、部分页面隐藏侧边图片的效果
• 原有Grid布局代码：

.main {
    grid-area: main;
    background-color: #fff;
    display: grid;
    grid-template-columns: 70% 30%;
    grid-template-rows: auto;
    grid-template-areas: 
        "text image";
    grid-gap: 4px;
}

• 异常表现：即使页面HTML中完全不编写图片栏对应的div元素，原图片栏所在的侧边30%宽度位置仍会预留大量空白，无法自动适配为单列布局。

问题根源 #

你给Grid容器写死了两列固定宽度grid-template-columns: 70% 30%，Grid布局会严格按照配置生成对应宽度的列，和列内是否存在子元素没有关系，所以哪怕图片节点完全不存在，30%宽度的列依然会被渲染，自然会留出空白。

修复方案 #

方案1：自适应列配置（改动最小，无需修改PHP渲染逻辑） #

直接修改.main容器的Grid规则，把固定比例列替换为自适应列，不需要额外加判断逻辑，图片列不存在时自动收缩为0，存在时和原有7:3比例效果完全一致：

.main {
    grid-area: main;
    background-color: #fff;
    display: grid;
    /* 替换原来写死的70% 30%列配置和固定grid-template-areas */
    grid-template-columns: minmax(0, 1fr) fit-content(30%);
    grid-template-rows: auto;
    grid-gap: 4px;
}
/* 文本容器固定放在第一列，对应原有text区域 */
.main > .text {
    grid-column: 1;
}
/* 图片容器放在第二列，对应原有image区域，节点不存在时第二列自动收缩消失 */
.main > .image {
    grid-column: 2;
    width: 100%;
}

如果你的文本和图片容器已经配置了对应grid-area属性，直接删掉原有固定的grid-template-areas和grid-template-columns配置即可生效。

方案2：类名切换布局（逻辑清晰，适合后续功能扩展） #

如果需要更明确的布局控制，可以在PHP渲染阶段判断当前页面是否需要展示图片栏，给.main容器添加不同状态类，分别对应单列/双列布局：

1. PHP渲染逻辑示例：

<?php
// 根据页面需求切换该变量，不需要图片时设为false即可
$showSideImage = true;
?>
<div class="main <?php echo $showSideImage ? 'with-sidebar' : 'single-column'; ?>">
    <div class="text">
        <!-- 文本内容区域 -->
    </div>
    <?php if ($showSideImage): ?>
    <div class="image">
        <!-- 图片侧边栏内容 -->
    </div>
    <?php endif; ?>
</div>

2. 对应CSS代码：

.main {
    grid-area: main;
    background-color: #fff;
    display: grid;
    grid-template-rows: auto;
    grid-gap: 4px;
}
/* 有图片时使用原有7:3两列布局 */
.main.with-sidebar {
    grid-template-columns: 70% 30%;
    grid-template-areas: "text image";
}
/* 无图片时使用单列布局 */
.main.single-column {
    grid-template-columns: 100%;
    grid-template-areas: "text";
}
/* 绑定子元素和grid区域 */
.main > .text {
    grid-area: text;
}
.main > .image {
    grid-area: image;
}

注意：不要尝试用display: none隐藏图片列解决问题，该方式只是视觉上隐藏元素，Grid生成的固定列依然存在，空白问题不会消失。

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