How to Style a Scrollable Horizontal List

There are often times – especially when designing for mobile screens – where you need to maximise the space available to you by styling a grid of items to be scrolled horizontally. A common use case is when you have multiple testimonials. Instead of stacking them all on top of each other, make them into a horizontal grid with scroll snapping to make the experience user-friendly.

So, how do we achieve this. By default I have my cards set up as an unordered list and I’m using grid to style them. The starting styles are:

/* DEFAULT STARTING STYLE */
.cards ul {
    list-style-type: none;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    margin-top: 5rem;
}

This styles the cards to show as two rows of six whilst in desktop mode. Then I use media queries to override when we reach smaller screens.

The first thing to change for those smaller screens is the grid-template-columns property as we don’t want columns any longer. If we were to stack them we would change to 1fr, but we don’t want that. We want them to sit side by side, but we don’t want grid to do its magic and start changing the width. Therefore we will change ours to grid-template-columns: none;

Next we need to set our grid-auto-flow to column so that the elements sit side-by-side. If you are following along, you’ll now see that you have the elements moving off the right hand side of the screen.

After this, we need to tell the browser how wide it should render each element. For mine, I chose 93%. This leaves enough space to show the other hidden elements and maintain good spacing grid-auto-columns: 93%;

Now, let’s make our items scroll instead of overflowing the screen with the following code:

overflow-x: auto; 
scroll-snap-type: inline mandatory;
overscroll-behavior-inline: contain;

Once we have done that, we need to style things a little better. You’ve probably got some spacing to the left and right of your content. The problem is, this will still apply to the scrolling list which results in a not too pleasing appearance. Let’s use margin-inline: -1.3rem; to remove that spacing (be aware that some older browsers still don’t support this – you can use margin-left & margin-right as fallbacks if you need to). To then ensure the element does still have spacing, use padding-inline: 1.3rem; to give inner padding to the list element. Both of these steps will ensure that your list still has the same spacing as content above and below, but when a user scrolls, it will show as moving to the edge and eventually off of the screen.

Everything is now set up except one last piece of magic. We have to tell the browser which elements we are snapping and how it should align them. To do this we need to add scroll-snap-align: start/center/end; to the individual elements. For me, I’ve added it to each li inside the ul. As soon as we add this, everything should work 😊

NOTE: if you are using scroll-snap-align: start or end you will need to add scroll-padding-inline: 1.3rem; to the parent element in order for the snapping to align with your other content. If you are using center like me, it’s not needed!

@media (max-width: 720px) {
    .cards ul {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 93%;
        gap: 1rem;
        overflow-x: auto;
        scroll-snap-type: inline mandatory;
        overscroll-behavior-inline: contain;
        padding-bottom: 1rem;
        margin-inline: -1.3rem;
        padding-left: var(--padding-left-right);
        padding-right: var(--padding-left-right);
    }

    /* HIDES THE BOTTOM SCROLLBAR ON iOS DEVICES /*
    ::-webkit-scrollbar {
        display: none
    }

    .card {
        scroll-snap-align: center;
    }
}

Hope this helps. Until next time, adios!