Challenge #006 - Auto-scrolling, responsive grid

- Takes about 2 minutes to complete


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.

What you’re building

Demo shows a 12 column grid that breaks down into a horizontal overflow scrolling component at a smaller viewport

The brief

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

Assets

I’ve used Sketch to design this challenge. You can view everything you need in the browser, here.

Here’s some assets to get you going:

Here are some CSS Custom Properties for your colours:

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

Submissions

This challenge is for you to learn and if you want to just want keep it to yourself, that’s all good. If you want to share it with the Front-End Challenge Club Community, tweet a publicly accessible link, using the hashtag: #FrontEndChallengesClub or directly to @FEChallengeClub and I’ll pick up and link to my favourite in my solution post.

Wrapping up

Enjoy this challenge and remember: we’re all in this together, so if folks have questions, tweet using the hashtag #FrontEndChallengesClub or tweet directly to @FEChallengeClub.

Only paying members get to see my solution to this challenge, so make sure you subscribe to a paid plan.

See you at the next one 👋


Other challenges

  1. #005 - Tabs

  2. #004 - Progress Button

  3. #003 - Duotone Card

  4. #002 - Toggle switch

  5. #001 - Email sign-up form

Sign up for a membership

Front-End Challenges club members get all sorts of benefits, including:

  • Full access to all content
  • Access to a private community of other members
  • Access to exclusive AMA sessions

Membership starts at $10 per month or $95 per year.

Sign Up For A Membership