Pure CSS Scrolling Grid

Don’t let your dreams be dreams. Nothing is impossible with CSS, creativity, and determination. Sometimes futzing with JavaScript to create a little bit of movement on a page feels a bit overkill to me. Hence this CodePen with a CSS solution for horizontally scrolling content on mobile devices.

You can scroll the content in the ‘Result’ tab of the CodePen by swiping on mobile, or holding shift and scrolling on desktop.

Adapting to Your Project

The code in the CodePen has a breakpoint of 580px, after which it displays content in a (non-scrolling) two column grid. You can adjust or remove the breakpoint, and change the grid-template-columns property of the .scroll-grid-container to suit the layout of your project.

If the background colour of your section is not white, you’re going to want to change the colours used in the gradient of the .scroll-grid-gradient div.

Not Waffling On

I’ll refrain from going into more detail, as I imagine the people who might want to use this will already feel comfortable making it work within their projects. If you find yourself stuck with this code however, feel free to contact me and I’ll see if I can help you out ✌