CSS 中的水平可滚动网格，最多 n 行

Question

我正在设计一个简单的水平可滚动网格。要求最多有 2 行。如果单元格适合一行，则应显示一行，否则显示下一行中的剩余项目。这可以通过网格实现吗？还是我必须使用 Flex？

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 162px);
  grid-template-rows: repeat(2, 162px);
  grid-auto-flow: column;
  grid-auto-columns: 162px;
  gap: 8px;
  overflow-x: auto;
  padding: 8px;
}

.grid-item {
  background-color: #ccc;
}

Example # 1 (If they fit in one row, it shouldn't wrap like this.)

<div class="grid-container">
    <!-- Example grid items -->
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
</div>

Example # 2

<div class="grid-container">
    <!-- Example grid items -->
    <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 class="grid-item">Item 0</div>
    <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 class="grid-item">Item 0</div>
</div>

问题： 红色网格看起来不错，因为它的单元格数量较多，因此它换行到第二行，但黄色网格的项目较少，但仍然换行到第二行。

Answer 1

在此处输入链接描述通过删除（grid-auto-flow：column；）它将起作用。或者您可以使用 grid-auto-flow: row;

[https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow][2]


Example : https://jsfiddle.net/n8rjhs56/1/