CSS网格 - 没有媒体查询的最大列数

Question

是否可以定义具有最大列数的网格，但允许元素在屏幕宽度发生变化时换行到新行上？

我已经实现了允许行换行到新行上的类，但是没有最大列数。

这里是a CodePen 的一种方法using Flexbox：

CSS：

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

另一种方法是使用a grid:

.grid {
  display: grid;
  counter-reset: grid-items;
  position: relative;
}


.grid--auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

我想要一个相当通用的解决方案。在没有 JavaScript 或媒体查询的情况下，我想要实现的目标是否可行？

Answer 1

您不能显式地为 flexbox 或 CSS 网格 执行此操作 - 但您可以使用 hack 使用CSS variables（通常这就是你所需要的）。

---

CSS 网格布局

例如，您可以在:root 中设置全局列号，而在grid wrapper 上设置特定列号 - 请参阅下面的 CSS 网格 全局设置了四列：

:root {
  --columns: 3;
}

.grid {
  display: grid;
  grid-gap: 10px;
  /* Adjusting for the 10px grid-gap as well */
  grid-template-columns: repeat(auto-fit, minmax(calc(100% / var(--columns) - 20px), 1fr));
}

.grid > * {
  background-color: green;
  height: 200px;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

现在您可以通过 redeclaring --columns 为 grid 容器 上的 列数 设置规则（或者您可以使用 JavaScript添加一个包含--columns 声明的class） - 请参阅下面的演示：

:root {
  --columns: 3;
}

.grid {
  display: grid;
  grid-gap: 10px;
  --columns: 4; /* Redefine the number of columns */
  grid-template-columns: repeat(auto-fit, minmax(calc(100% / var(--columns) - 20px), 1fr));
}

.grid > * {
  background-color: green;
  height: 200px;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

---

弹性盒

类似的参数对 flexboxes 有效 - 请参阅下面的简化演示：

:root {
  --columns: 3;
}

.flexbox {
  display: flex;
  flex-wrap: wrap;
  --columns: 4; /* Redefine the number of columns */
}

.flexbox > * {
  background-color: green;
  height: 200px;
  margin: 10px;
  flex-basis: calc(100% / var(--columns) - 20px);
}

<div class="flexbox">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Answer 2

使用 CSS 网格，您可以考虑使用 max(width, 100%/N)，其中 N 是最大列数。如果容器的宽度增加，100%/N 肯定会大于width，因此我们每行的元素不会超过N。

.grid-container {
  --n: 4; /* The maximum number of columns */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(200px, 100%/var(--n)), 1fr));
}

.grid-item {
  background: tomato;
  padding: 5px;
  height: 50px;
  margin: 10px;

  line-height: 50px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  box-sizing: border-box;
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
</div>

<div class="grid-container" style="--n:3">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
</div>

有间隙：

.grid-container {
  --n: 4; /* The maximum number of columns */
  display: grid;
  grid-template-columns: repeat(auto-fill,
           minmax(max(200px,(100% - (var(--n) - 1)*10px)/var(--n)), 1fr));
  gap: 10px;
  margin: 5px;
}

.grid-item {
  background: tomato;
  padding: 5px;
  height: 50px;

  line-height: 50px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  box-sizing: border-box;
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
</div>

<div class="grid-container" style="--n:3">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
</div>

---

使用 flexbox，您可以简单地为容器设置 max-width，因为您的元素具有固定宽度：

.flex-container {
  display: flex;
  flex-wrap: wrap;
  max-width: calc(5*(200px + 20px));
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 100px;
  margin: 10px;

  line-height: 100px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  box-sizing: border-box;
}

<div class="flex-container wrap">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
  <div class="flex-item">7</div>
  <div class="flex-item">8</div>
</div>

唯一的缺点是您需要知道元素的宽度及其边距才能正确设置max-width。

如果您希望您的元素扩展并覆盖所有宽度，您可以使用min-width 的技巧，如下所示：

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item {
  background: tomato;
  padding: 5px;
  min-width: 200px;
  width: calc(100%/5 - 20px); /* 5 columns */
  height: 100px;
  margin: 10px;

  line-height: 100px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  box-sizing: border-box;
}

<div class="flex-container wrap">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
  <div class="flex-item">7</div>
  <div class="flex-item">8</div>
</div>

这里还需要考虑边距。您可以使用 CSS 变量轻松地使其更加灵活：

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item {
  --m: 10px;
  background: tomato;
  padding: 5px;
  min-width: 200px;
  width: calc(100%/5 - 2*var(--m)); /* 5 columns */
  height: 100px;
  margin: var(--m);

  line-height: 100px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  box-sizing: border-box;
}

<div class="flex-container wrap">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
  <div class="flex-item">7</div>
  <div class="flex-item">8</div>
</div>

如果您希望元素始终展开（即使有换行），也可以考虑flex-grow，但您可能会遇到需要通过一些技巧来修复的最后一行问题：

.flex-container {
  display: flex;
  flex-wrap: wrap;
  --m: 10px;
}

.flex-item {
  background: tomato;
  padding: 5px;
  min-width: 200px;
  flex-grow: 1;
  width: calc(100%/5 - 2*var(--m)); /* 5 columns */
  height: 100px;
  margin: var(--m);

  line-height: 100px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  box-sizing: border-box;
}

.flex-container span {
  min-width: 200px;
  flex-grow: 1;
  width: calc(100%/5 - 2*var(--m)); /* 5 columns */
  margin: 0 var(--m);
}

<div class="flex-container wrap">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
  <div class="flex-item">7</div>
  <div class="flex-item">8</div>

  <!-- 4 empty elements to fix the issue (we can also use a pseudo element) -->
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

在下面的示例中，我们将列数设为 5，因此我们将需要至少 4 个空元素来解决问题，以防最后一行中有 1 到 4 个元素。

当然，这是一个缺点，但由于您知道列数，您可以轻松设置这些空元素，并且不需要任何 JavaScript。

为了更灵活，这里有一个 CSS 变量的想法：

.flex-container {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid;
  --m: 10px;
  --n: 5;
  --width: 150px;
}

.flex-item {
  background: tomato;
  min-width: var(--width);
  flex-grow: 1;
  width: calc(100%/var(--n) - 2*var(--m));
  height: 50px;
  margin: var(--m);

  box-sizing: border-box;
}

.flex-container span {
  display: contents; /* Each span will give us 2 elements */
}
.flex-container span: before,
.flex-container span: after,
.flex-container: before,
.flex-container: after{
  content: "";
  min-width: var(--width);
  flex-grow: 1;
  width: calc(100%/var(--n) - 2*var(--m));
  margin :0 var(--m);
  order: 1; /* We make sure they are at the end */
}

<div class="flex-container wrap">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
  <div class="flex-item">7</div>
  <div class="flex-item">8</div>

  <!-- A lot of elements !! -->
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

<div class="flex-container wrap" style="--n:10">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
  <div class="flex-item">7</div>
  <div class="flex-item">8</div>

  <!-- A lot of elements !! -->
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

<div class="flex-container wrap" style="--n:3">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
  <div class="flex-item">7</div>
  <div class="flex-item">8</div>

  <!-- A lot of elements !! -->
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

我使用display: contents可以设置N个空元素，后面会被认为是2*N，这样可以减少代码。

如果您有 7 列，我们将只需要 6 个额外的元素。我们可以使用两个伪元素，然后只用 2 个空元素来覆盖剩下的 4 个。

Answer 3

通过一些数学运算，您可以在最小值最大值内的最大值函数中添加一个百分比。这样，它会在 200 像素处中断，但会扩展以填充页面的 1/3（在这种情况下，因为我使用了 33%。不过，只需在此处添加您想要的任何百分比即可）。

grid-template-columns: repeat(auto-fit, minmax(max(200px, 33%), 1fr));