Challenge: Auto-scrolling, responsive grid

Front-End Challenges Club - Challenge #006


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 brief permalink

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 permalink

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:

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

Wrapping up permalink

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 👋


Comments

If you liked this post, you might like these ones, too

  1. Challenge: Tabs

    Front-End Challenges Club - Challenge #005

    Continue
  2. Solution: Progress Stepper

    Front-End Challenges Club - Challenge #008

    Continue
  3. Challenge: Progress Stepper

    Front-End Challenges Club - Challenge #008

    Continue

Become a supporter by joining the Piccalilli Membership

For $5 per month, you get access to a private, friendly Discord community, a regular newsletter, huge discounts on courses and free access to all premium tutorials.

Most importantly, by becoming a supporter, you help make as much content, free-to-everyone as possible on this site, which benefits everyone. As a member, you also get an ad-free experience around the site.

Support Piccalilli by becoming a member

Sign up for updates

Stay up to date with updates from Piccalilli. You’ll get alerted as soon as any new content gets published. You’ll also get updates on upcoming courses and membership features! You can unsubscribe at any time, too.