css grid 自动高度,如何使用CSS Grid和自动填充/调整功能来限制较大视口中的列数？...

可以使用CSS Grid和自动填充/调整功能来限制较大视口中的列数。以下是一些示例代码：

HTML代码：

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

CSS代码：

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 200px;
  grid-gap: 10px;
}

.grid-item {
  background-color: #ddd;
  padding: 20px;
}

上述代码将创建一个具有自动调整列宽的网格，每列最小宽度为200px，并且自动填充空间。每个网格项目高度设置为200px，并且将其间隔设置为10px。如果视口变得更大，则将添加更多列。如果视口变得更小，则会自动调整列宽以适应视口。

你可以根据需要调整minmax的最小和最大值，以及grid-auto-rows的高度，以适应你的需求。