如何让minmax为15rem的Grid卡片适配308px以下响应式布局？

问题根源 #

你设置的minmax()最小阈值是固定值（.blog-cards的15rem、.widgets的270px），当视口宽度小于该固定值加上容器的内边距/外边距总和时，Grid无法自动调整列数，导致卡片溢出视口，失去响应性。

具体适配方案 #

1. 使用clamp()灵活控制最小列宽

将固定的最小宽度替换为clamp()函数，兼顾小屏幕适配和大屏布局：

.blog-cards {
  grid-template-columns: repeat(auto-fill, minmax(clamp(12rem, 90vw, 15rem), 1fr));
}

.widgets {
  grid-template-columns: repeat(auto-fill, minmax(clamp(15rem, 90vw, 270px), 1fr));
}

• clamp(min, preferred, max)会根据视口自动调整：小屏幕下用90vw（占视口90%，避免溢出），达到阈值后切换为固定的最大宽度。

2. 媒体查询强制单列布局

针对308px以下的屏幕，直接设置单列布局，最稳妥：

@media (max-width: 308px) {
  .blog-cards, .widgets {
    grid-template-columns: 1fr;
  }
}

这种方式直接消除小屏幕下的列宽冲突，保证卡片完全适配视口。

3. 修复卡片内部元素溢出

检查卡片内部的图片、按钮等元素，添加如下样式避免超出容器：

.card img, .card button {
  max-width: 100%;
  height: auto;
}

如果有固定宽度的内部元素，必须限制其最大宽度为容器宽度。

验证效果 #

调整后，小于308px的屏幕下卡片会自动变为单列或自适应视口宽度，不会再出现溢出问题。

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