css - 你如何在单行中制作css网格流而不换行

Question

...
.MusicRow {
    color: white;
    position: relative;
    padding-left: 32px;
    display: flex;
    flex-direction: column;
    margin: 4.5vw 0;
}

.MusicRow .RowHeader {
    display: flex;
    justify-content: space-between;
}

.MusicRow .RowHeader .Title {
    font-size: 24px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: -0.04em;
    text-transform: none;
}

.MusicRow .Container {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fill,minmax(220px,1fr));
    padding-right: 32px;
}
...

...
return (
<div className={style.MusicRow}>
   <div className={style.RowHeader}></div>
   <div className={style.Container}>
          {data.map(item => { return <RowItem key={item.id} info={item}/> }) }
    </div>
</div>
)
...

grid-template-columns用于显示项目组件列表。

现在，如果列表超过一行或将所有项目保留在一行，我无法让它停止换行。
目标是在单行上显示一部分项目列表，并且会有一个“查看全部”链接，该链接将重定向到另一个页面以将所有项目显示为网格

例如，调整大小可以至少显示 2-3 个项目，没有最大值取决于窗口的宽度，扩展应该将更多项目从右侧带入行中。不会有部分项目溢出，所有项目都需要适合

标签： cssoverflowcss-grid