如何用CSS创建带响应式项目的可水平滚动网格并控制容器参数

核心Grid布局解决方案 #

要实现固定行数+水平滚动的网格容器，关键是修改网格的排列方向，让它横向扩展而非自动换行。调整后的CSS如下：

.emojiList {
    position: relative;
    display: grid;
    /* 固定行数（示例为3行），每行高度均分容器 */
    grid-template-rows: repeat(3, 1fr);
    /* 自动生成列，列宽用minmax保证最小宽度，也可设固定值如80px */
    grid-auto-columns: minmax(80px, 1fr);
    /* 强制网格按列方向排列，超出容器宽度时触发水平滚动 */
    grid-auto-flow: column;
    justify-items: center;
    align-items: center;
    width: 100%;
    /* 容器高度对应行数总高度，可根据需求调整 */
    height: 300px;
    padding: $padding;
    gap: $gap;
    background: $palette-white;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* WebKit浏览器隐藏滚动条 */
.emojiList::-webkit-scrollbar {
    display: none;
}

原代码失效原因 #

你之前用grid-template-columns: repeat(4, 1fr)会强制每行显示4个项目，超出后自动换行，导致内容纵向堆叠，和水平滚动的需求冲突。改用grid-auto-flow: column后，网格会优先横向添加列，不会换行，超出容器宽度时自然触发水平滚动。

滚动吸附优化（可选） #

如果需要滚动时自动对齐到列，提升交互体验，可添加滚动吸附属性：

.emojiList {
    /* 保留原有属性 */
    scroll-snap-type: x mandatory;
}

.emojiList > .Emoji {
    scroll-snap-align: start;
}

Flexbox备选方案 #

如果Grid布局仍有适配问题，可采用Flexbox嵌套模拟网格：

.emojiList {
    width: 100%;
    height: 300px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: $padding;
    background: $palette-white;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.emojiList-inner {
    display: flex;
    flex-wrap: wrap;
    width: max-content; /* 让内层容器宽度自适应所有项目 */
    height: 100%;
    gap: $gap;
}

.Emoji {
    /* 每行4个项目，计算宽度时减去gap */
    flex: 0 0 calc((100% / 4) - $gap);
    /* 3行，计算高度时减去gap */
    height: calc((100% / 3) - $gap);
    display: flex;
    align-items: center;
    justify-content: center;
}

对应的HTML结构需要嵌套一层：

<div ref={ref} className="emojiList">
    <div className="emojiList-inner">
        {emojis.map((emoji) => (
            <Emoji key={emoji.id} emoji={emoji} />
        ))}
    </div>
</div>

推荐工具库 #

如果项目数量较多或需要更复杂的交互，可使用以下成熟库：

• react-window：轻量虚拟滚动库，支持网格布局的水平滚动，优化大量数据时的性能
• react-virtualized：功能全面的虚拟滚动库，包含Grid组件，支持自定义行列配置

内容的提问来源于stack exchange，提问作者Gegzz