Creating horizontal scrolling card sections with just CSS

So, you’ve noticed this new design language of using cards everywhere. Most of the APPs nowadays use them. Facebook, Google, Twitter to name a few.

Its easy to build card sections with horizontal swiping behaviour in mobile APPs. There are built in layouts for them in iOS or Android development. But making similar card sections for a responsive website is bit of a pickle. Mostly, people tend to use some or other Javascript library to achieve this. These libraries may seem to work great and they are easy to use at first, but they tend to overload your website and may affect website’s performance.

What if this can be achieved with a simple CSS trick? It would have hardware acceleration and natural scrolling without any performance delays.

That is exactly what we’ll try to achieve here with very small and simple CSS code.