CSS Grid布局如何设置平板端最小网格列数？

这个需求完全可以通过CSS原生的max()函数实现，不需要额外JS逻辑，修改后代码如下：

.some-grid {
  --columns: 1;
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
}

@media (min-width: 751px) {
  .some-grid {
    /* 用max()做最小值兜底，保证列数不会低于2 */
    --columns: max(2, calc(var(--columns-large) - 1));
  }
}

@media (min-width: 991px) {
  .some-grid {
    /* 这里可以设置2-5之间的任意值，都能满足需求 */
    --columns-large: 2;
  }
}

逻辑说明 #

• max()函数会返回传入多个参数中的最大值，刚好适配最小列数限制的要求
• 当桌面端--columns-large设为2时：calc(2 - 1)结果为1，max(2, 1)返回2，平板端列数为2，避免出现1列的问题
• 当桌面端--columns-large设为3-5时：calc(var(--columns-large) - 1)结果为2-4，都大于等于2，会正常取减1后的值，符合「平板端列数比桌面端少1」的要求
• 兼容性：max()函数在所有现代浏览器（Chrome/Edge 79+、Firefox 75+、Safari 11.1+）都支持，完全满足常规业务场景需求

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