如何根据列尺寸应用容器查询？

我明白你现在的困扰——想让卡片根据所在列的宽度自动调整布局，但容器查询好像不买百分比的账，连你写的50px阈值都没生效，还在纠结是不是只能用“魔法值”。咱们一步步来拆解问题，完美解决它。

核心解决方案：用容器名称匹配替代百分比阈值 #

其实你完全没必要纠结百分比计算的问题，容器查询支持按容器名称精准匹配，这比依赖宽度值更直接，还能彻底避开“魔法值”的尴尬。具体操作很简单：

1. 给不同的列容器设置专属的容器名称
   给.col-4、.col-6、.col-12这些类分别指定容器名称，这样后续的容器查询就能直接针对这些列类型触发：

   .col-4 {
     flex: 0 0 calc(100% / (12 / 4) - 2rem);
     container: col-4 / inline-size; /* 给col-4容器命名 */
   }
   
   .col-6 {
     flex: 0 0 calc(100% / (12 / 6) - 2rem);
     container: col-6 / inline-size; /* 给col-6容器命名 */
   }
   
   .col-12 {
     flex: 0 0 calc(100% / (12 / 12) - 2rem);
     container: col-12 / inline-size; /* 给col-12容器命名 */
   }
   

2. 针对容器名称写样式规则
   现在不管列的实际宽度是多少，只要卡片在对应的列容器里，就会应用对应的样式：

   /* col-4列中的卡片样式 */
   @container col-4 {
     .card {
       background: blue;
       padding: 2rem; /* 窄列里缩小内边距更紧凑 */
     }
   }
   
   /* col-6列中的卡片样式 */
   @container col-6 {
     .card {
       background: green;
       padding: 3rem;
     }
   }
   
   /* col-12列中的卡片样式 */
   @container col-12 {
     .card {
       background: yellow;
       padding: 4rem;
     }
   }
   

解释你原来的问题 #

1. 为什么@container (min-width: calc(100%/(12/6)) -2rem)无效？

容器查询的阈值不能依赖容器自身的宽度（也就是calc里的100%），这会造成循环依赖——容器宽度决定阈值，阈值又反过来依赖容器宽度，浏览器会直接忽略这种无效的规则。

2. 为什么@container (min-width: 50px)没生效？

大概率是这两个原因：

• 浏览器版本不支持：容器查询需要Chrome 105+、Firefox 110+、Safari 16.4+，可以先检查你的浏览器版本；
• 实际宽度未达标：如果父容器.row特别窄，导致.col的实际宽度真的小于50px，那也不会触发。但正常情况下.col-4的宽度远大于50px，你可以把阈值改成min-width: 200px试试，看会不会触发蓝色背景。

优化后的完整代码 #

把上面的调整整合后，最终的完整代码如下：

*, *::before, *::after { box-sizing: border-box; }

.content-grid {
  --padding-inline: 1rem;
  --content-max-width: 900px;
  --breakout-max-width: 1200px;
  --breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) / 2);
  display: grid;
  grid-template-columns: 
    [full-width-start] minmax(var(--padding-inline), 1fr)
    [breakout-start] minmax(0, var(--breakout-size))
    [content-start] min(100% - (var(--padding-inline) * 2), var(--content-max-width))
    [content-end] minmax(0, var(--breakout-size))
    [breakout-end] minmax(var(--padding-inline), 1fr)
    [full-width-end];
  row-gap: 2rem;
}

.content-grid> :not(.breakout, .full-width),
.full-width> :not(.breakout, .full-width) {
  grid-column: content;
}

.content-grid>.breakout { grid-column: breakout; }

.content-grid>.full-width {
  grid-column: full-width;
  display: grid;
  grid-template-columns: inherit;
}

html { color-scheme: dark; }

.primary-header {
  padding-block: 1rem;
  margin-block-end: 3rem;
  background: mistyrose;
  color: black;
}

.primary-header__layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: max(5vw, 1rem);
}

nav a {
  color: inherit;
  text-decoration: none;
}

nav a:hover, nav a:focus {
  color: darkblue;
  text-decoration: underline;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 2rem;
}

.col {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.col-4 {
  flex: 0 0 calc(100% / (12 / 4) - 2rem);
  container: col-4 / inline-size;
}

.col-6 {
  flex: 0 0 calc(100% / (12 / 6) - 2rem);
  container: col-6 / inline-size;
}

.col-12 {
  flex: 0 0 calc(100% / (12 / 12) - 2rem);
  container: col-12 / inline-size;
}

.card {
  background: red;
  padding: 4rem;
}

/* 容器查询规则 */
@container col-4 {
  .card {
    background: blue;
    padding: 2rem;
  }
}

@container col-6 {
  .card {
    background: green;
    padding: 3rem;
  }
}

@container col-12 {
  .card {
    background: yellow;
    padding: 4rem;
  }
}

HTML部分和你原来的完全一致，不需要修改。

内容来源于stack exchange