我正在设计一个简单的水平可滚动网格。要求最多有 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;
}
问题: 红色网格看起来不错,因为它的单元格数量较多,因此它换行到第二行,但黄色网格的项目较少,但仍然换行到第二行。
通过删除 (grid-auto-flow: column;) 它将起作用。或者您可以使用 grid-auto-flow: row;
[https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow]
Example : [https://jsfiddle.net/n8rjhs56/1/]