在CSS网格中，如何根据有多少列使每列为1/3（最小）和1/2（最大）？

Question

假设我有一个带有

display: grid

的容器。我想确保每列占用以下宽度，具体取决于有多少列：

• 如果 2 或更少，则每列占用

  1/2

  。
• 如果大于2，每列占用

  1/3

到目前为止我有以下代码：

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
    gap: 8px;
  border: 1px solid black;
  padding: 8px;
}

.column {
  grid-column: span 4 / span 4;
  border: 1px solid red;
  padding: 8px;
}

<div class="container">
  <div class="column">Column</div>
  <div class="column">Column</div>
  <div class="column">Column</div>
</div>

它在大多数情况下都有效，因为它处理最常见的用例，即每列占用 1/3 宽度。但我很乐意根据存在的列数来实现这种动态。有办法做到这一点吗？

Answer 1

要实现所需的布局，即当列数为 2 或更少时，每列占用容器宽度的 1/2，当列数超过 2 时，每列占用容器宽度的 1/3，可以使用 CSS网格和媒体查询。以下是修改代码的方法：

<style>
.container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Initial setup for 2 columns */
    gap: 8px;
    border: 1px solid black;
    padding: 8px;
  }

@media (min-width: 600px) { /* Adjust for more than 2 columns at a breakpoint */
    .container {
      grid-template-columns: repeat(3, 1fr);
    }
}

.column {
    border: 1px solid red;
    padding: 8px;
  }
</style>

<div class="container">
  <div class="column">Column</div>
  <div class="column">Column</div>
  <div class="column">Column</div>
</div>