时间戳

首页 > 解决方案 > 网格中的最小列数

css - 网格中的最小列数

问题描述

请记住，列数的值是动态的，可以设置为 2 到 5 列之间的任何数字。

我有两个“平板电脑”和“桌面”的断点，我希望平板电脑的列数比桌面少一。但是，我正在尝试找到一种方法来设置平板电脑的最小列数，因为如果选择了“2”，我不希望列数为 1。

到目前为止，我有以下（缩写）代码：

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

@media (min-width: 751px) {
  .some-grid {
    /* This would output 1 column, but would like to set it to 2 minimum */
    --columns: calc(var(--columns-large) - 1);
  }
}

@media (min-width: 991px) {
  .some-grid {
    --columns-large: 2;
  }
}

这可能吗？

标签： csscss-grid

解决方案

利用max()

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

@media (min-width: 751px) {
  .some-grid {
    --columns: max(2,var(--columns-large) - 1);
  }
}

@media (min-width: 991px) {
  .some-grid {
    --columns-large: 2;
  }
}

/**/
.some-grid {
  gap:5px;
}
.some-grid * {
  height:40px;
  background:red;
}
<div class="some-grid">
  <div></div>
  <div></div>
  <div></div>
</div>

推荐阅读