如何通过CSS结合自定义变量实现响应式可配置列数的画廊？

你之前尝试用@media (--gallery-columns: X)的写法无效，是因为媒体查询无法直接以CSS变量作为判断条件——CSS变量属于元素运行时属性，而媒体查询是静态的环境判断，无法动态读取变量值。下面是两种纯CSS可行方案，满足你“桌面列数按比例缩小到移动端”的需求：

方案一：属性选择器+CSS变量映射 #

利用内联样式中的原始列数变量，通过属性选择器匹配不同列数的画廊元素，在媒体查询中重新设置响应式列数变量。

步骤1：修改HTML，新增基准列数变量 #

把用户选择的列数作为基准变量，后续响应式调整基于这个基准值：

<section class="gallery" style="--gallery-columns-base: {{ gallery_columns }}">
  <div class="gallery-container">
    <!-- 图片/视频内容 -->
  </div>
</section>

步骤2：编写CSS样式 #

默认使用基准列数作为桌面端列数，在移动端通过属性选择器匹配不同基准值，设置对应的比例列数：

.gallery {
  --gallery-columns: var(--gallery-columns-base); /* 桌面端默认使用用户选择的列数 */
}

.gallery-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter-w);
}

.gallery-container > img,
.gallery-container > video {
  object-fit: cover;
  width: calc((100% - (var(--gallery-columns) - 1) * var(--gutter-w)) / var(--gallery-columns));
  height: 100%;
}

/* 移动端断点示例（可根据需求调整宽度阈值） */
@media (max-width: 768px) {
  .gallery {
    &[style*="--gallery-columns-base: 6"] { --gallery-columns: 3; }
    &[style*="--gallery-columns-base: 5"] { --gallery-columns: 2; } /* 若需要3列可直接修改 */
    &[style*="--gallery-columns-base: 4"] { --gallery-columns: 2; }
    &[style*="--gallery-columns-base: 3"] { --gallery-columns: 1; } /* 若需要2列可直接修改 */
    &[style*="--gallery-columns-base: 2"] { --gallery-columns: 1; }
    &[style*="--gallery-columns-base: 1"] { --gallery-columns: 1; }
  }
}

方案二：CSS Grid替代Flex（更简洁） #

CSS Grid的repeat()函数天生适合网格布局，能大幅简化列宽计算，配合属性选择器同样实现响应式比例调整。

CSS样式修改 #

保留方案一的HTML结构，仅修改容器样式：

.gallery {
  --gallery-columns: var(--gallery-columns-base);
}

.gallery-container {
  display: grid;
  grid-template-columns: repeat(var(--gallery-columns), 1fr);
  gap: var(--gutter-w);
}

.gallery-container > img,
.gallery-container > video {
  object-fit: cover;
  height: 100%;
}

/* 移动端断点样式同方案一 */
@media (max-width: 768px) {
  .gallery {
    &[style*="--gallery-columns-base: 6"] { --gallery-columns: 3; }
    &[style*="--gallery-columns-base: 5"] { --gallery-columns: 2; }
    &[style*="--gallery-columns-base: 4"] { --gallery-columns: 2; }
    &[style*="--gallery-columns-base: 3"] { --gallery-columns: 1; }
    &[style*="--gallery-columns-base: 2"] { --gallery-columns: 1; }
    &[style*="--gallery-columns-base: 1"] { --gallery-columns: 1; }
  }
}

扩展说明 #

• 若需要平板等额外断点，只需新增对应的@media规则，重复属性选择器的映射逻辑即可。
• 属性选择器[style*="--gallery-columns-base: X"]是通过匹配内联样式中的变量声明来定位元素，兼容性覆盖所有现代浏览器及IE11+。

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