Challenge: Auto-scrolling, responsive grid

Stacking at mobile is so 2012, so in this challenge, we’ll break our standard 12 column grid into a nice scrolling container.

Using progressive enhancement, we’ll aim to create something that works great, regardless of the browser or device.

The briefpermalink

Take the design assets and build and this CSS layout with whatever front-end technology you want.

Note: The device icons are purely for the purposes of this prototype, so don’t worry about building them.

You should aim for the following:

Your solution works all the way back to old browsers like IE
The overflow component works for both fine pointing inputs (like mice) and touch inputs

Here’s some assets to get you going:

Here are some CSS Custom Properties for your colours:

Code languagecss

:root {
  --color-dark: #353535;
  --color-light: #ffffff;
  --color-mid: #efefef;
  --color-slate: #7f7f7f;
}

When you’ve tried building this one for yourself, head over to the solution to see how I built it!

See you at the next one 👋