I’m trying to create a horizontally scrollable container with items arranged in a grid layout. I want the items to adapt to the screen width, allowing for horizontal scrolling when there are too many items to fit on one screen. Additionally, I need to control the number of rows or the height of the container.

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

.emojiList {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    justify-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;
}

Design

I’ve tried flexbox, grid, scroll snap, but couldn’t achieve this. I’m down for using any library if you can offer.