DEV Community

Cover image for CSS-only horizontally-scrolling cards with snapping
Allan White
Allan White

Posted on

CSS-only horizontally-scrolling cards with snapping

It's a common design problem to have content cards to lay out in different arrangements in various viewports. In this exploration, I wanted to see how cards might be more effectively organized using a simple design pattern of a scrolling horizontal list. Try it on mobile:

It's implemented with CSS, and doesn't require any scripting for the layout or interactions. Lozad is used for lazy-loading.

There's some nice hover effects in place, CSS custom properties, and I use a simple CSS mask gradient on the edge to indicate there are more cards. To-do: Enable tabindex for accessibilty.

I experimented with more robust CSS grid layout for the cards, but I found after playing with it on mobile it was overkill.

Top comments (14)

Collapse
 
jeremydouglas profile image
Jeremy D. Hoover

Awesome, I need to make use of scroll-snap-type.

Have you thought about users that might not have horizontal scrolling on their mouse? I'm not sure how common that is.

Collapse
 
munchkin profile image
Munchkin

You can hold Shift + Scroll and it will go horizontally. Though it's not very intuitive or common knowledge. It's generally not a great idea to design desktop interfaces where horizontal scrolling is necessary for that reason, despite having trackpads and such.

Collapse
 
robiulman profile image
Robiul • Edited

Thank man, to said the words (hold Shift + Scroll) I've been working for a while to build a navigation horizontal scrolling with tailwindcss but I got trouble while I scroll the navigation it didn't work then I try to finding the fix all most spent lot of time to figure the problem out and it's freaking me out but when I saw your comment just slap my self I was forget this thing (hold shift + scroll) and I say again and again

Thank you! again happy coding

Collapse
 
architekco profile image
Evan

I don’t know a single person with a horizontal scrolling wheel/button on their mouse (except myself, of course). However, just about everyone I know uses a MacBook or other laptop with a trackpad that allows for horizontal scrolling :)

Collapse
 
allanwhite profile image
Allan White

Part of the rationale in my mind (which this conversation is helping clarify!) is to 1.) enhance the touch experience and optimize for the touchscreen context, and 2.) provide a decent layout for desktop. On wider viewports, my original plan was to simply be able to see all the cards (which of course, only works if you have a small number of cards).

What's interesting is this reveals how affordances for mouse users pull us into Carousel territory, with arrows/buttons for navigation, or other means of navigating. Then we're in JS territory (not bad of course) for interactions. I'll admit I've implemented carousels (in the trenches with you, Jeremy!) but not designed them from the ground up.

At the least, looking at say, Netflix's examples, it makes sense to have some arrows at the end of the rows to go back and forth. Progressive enhancement.

Collapse
 
nicflemmer profile image
NicFlemmer

How would one add the arrows or connect it to the mouse wheel?

Collapse
 
allanwhite profile image
Allan White

Another idea was to have it grabbable and let the mouse users just grab & drag. Cursor change could do that. Not sure most users would think to do so though. User test all the codepens! ;)

Collapse
 
jeremydouglas profile image
Jeremy D. Hoover

Yes, that works. I solved this in another way on a lower budget site. I went with multiple rows of cards and an expand link. This changes the entire row from a horizontal scroll to a simple list.

Thread Thread
 
allanwhite profile image
Allan White

I just happened to swing back by your comment Jeremy, the toggling layout you have is a really snappy, simple solution to that challenge. Lets the user decide (with low "penalty") how they want to navigate the items. πŸ‘

Collapse
 
totiiimon profile image
Totiimon

Or maybe just add some buttons to swap the cards and let this functionality be secondary. But I guess it would be best having in mind all the edge cases where this won't be usable.

Collapse
 
scriptedpixels profile image
πŸ‘¨πŸΎβ€πŸ’» Kam Banwait

Looks really good. I usually add this CSS Snap point:

css-tricks.com/introducing-css-scr...

Collapse
 
allanwhite profile image
Allan White

Kam, thank you, that was a nice tip! I've added those properties to the demo, and it seems to work correctly on mobile. πŸ™

Collapse
 
fultonbrowne profile image
Fulton Browne

Great project and hey, I live in Portland too.

Collapse
 
bayuangora profile image
Bayu Angora

This horizontally scroll cards remind me to Disqus related posts.