CSS Grid中minmax(0,24%)无法让空列宽度变为0该如何处理？

可以通过CSS实现该需求，核心是结合:empty伪类匹配空的.card-media元素，再调整对应网格布局属性，以下是两种兼容性不同的实现方案：

方案1：高兼容性实现（支持所有现代浏览器） #

思路是将网格列宽改为自适应内容，通过控制非空.card-media的宽度实现24%的预设占比，空元素自动不占空间：

1. 修改原有.card的网格列定义：

.card {
  /* 将原来的minmax(0, 24%)替换为auto，让第一列宽度随内容自适应 */
  grid-template-columns: auto 1fr;
  /* 其余原有属性保持不变 */
  grid-template-rows: auto 1fr auto;
  grid-auto-flow: row;
  grid-template-areas: 'card-media card-title' 'card-media card-content' 'card-action card-action';
  padding: 1rem;
  width: 100%;
}

2. 新增控制.card-media宽度的规则：

/* 非空时占24%宽度，保留原有边距 */
.card-media:not(:empty) {
  width: 24%;
  margin-right: 2%;
}
/* 为空时清除边距，不占用额外空间 */
.card-media:empty {
  margin: 0;
}

补充提示：原有.card-media里的float: left在grid布局下不会生效，可以直接删除。

方案2：更简洁的实现（支持Chrome 105+、Safari 15.4+、Firefox 121+） #

思路是通过:has()伪类直接匹配存在空.card-media的父容器，修改网格轨道宽度，原有基础代码无需大幅改动，只需新增以下规则：

/* 匹配包含空.card-media的.card容器，将第一列宽度设为0 */
.card:has(.card-media:empty) {
  grid-template-columns: 0 1fr;
}
/* 清空空元素的边距，避免额外占位 */
.card-media:empty {
  margin-right: 0;
}

原问题原因说明 #

你之前的写法是提前给网格第一列预定义了固定分配规则，不管第一列内的元素是否有内容，网格轨道都会按照你设置的minmax(0, 24%)分配空间，所以即使.card-media为空，对应列依然会占用24%宽度。

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