DEV Community

loading...
Cover image for CSS-only horizontally-scrolling cards with snapping

CSS-only horizontally-scrolling cards with snapping

allanwhite profile image Allan White ・1 min read

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.

Discussion (13)

pic
Editor guide
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
docmars profile image
Andy Merskin

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
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 Author

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
allanwhite profile image
Allan White Author

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 Author

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 Author

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.

Collapse
waqarhusain profile image
Waqar Hussain

Nice one! This is some useful stuff, will be trying it in next project. Thanks