About The Author

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. When he is not writing or speaking at a conference, he’s most probably running … More about Vitaly Friedman

The CSS Grid Challenge: Build A Template, Win Some Smashing Prizes!

      Layout on the web has always been tricky, but with CSS Grid being now supported in all major browsers, most of the hacks that helped to achieve complex layouts have become obsolete.

      To explore the possibilities and features of CSS Grid together, we’d love to invite you to a little contest. Because there’s nothing better to completely grasp a new technology as getting your hands dirty and playing with it, right?

      CSS Grid Challenge
      Show your CSS Grid skills and, with a bit of luck, win a smashing prize.

      The Challenge

      Now, here’s the challenge: You create an interesting, accessible layout with CSS Grid, or use CSS Grid to rebuild an existing layout. What you design is entirely up to you. Feel free to use Flexbox additionally as well, e.g. as fallback for browsers not supporting CSS Grid. The only requirement is that the template you submit doesn’t break in IE9 and is still fully accessible in IE8. Deadline: September 30th.

      At the end of the contest, all templates and layouts will be made available to everyone for free download under the MIT license. So you can use them for personal and commercial projects without any restrictions. The aim is to build a community repository full of CSS Grid goodness that inspires fellow developers and helps spread the wide adoption of CSS Grid.

      So, What Can You Win?

      After the deadline has ended, we’ll announce the lucky winners who'll win a quite extraordinary smashing prize (and a couple of other Smashing extras, see below):

      • a round-trip flight to Barcelona, Spain,
      • full accommodation in a fancy hotel,
      • a ticket to the Smashing Conference Barcelona 2017,
      • a Smashing workshop of your choice,
      • a signed edition of our upcoming book Design Systems by Alla Kholmatova,
      • your very own Smashing caricature, designed just for you.

      Getting Started With CSS Grid

      Last but not least, before you dive right into the challenge, here are some helpful resources to kick-start your CSS Grid adventure.

      Resources and References

      Demos

      Tutorials

      Talks

      Inspiration

      Finally, to get your ideas flowing, some inspiring CodePen experiments that illustrate the magic of CSS Grid:

      Responsive Magazine Layout
      Responsive Magazine Layout by Heather Buchel

      Minimalistic CSS Grid Layout
      Minimalistic CSS Grid Layout by Nate Green
      CSS Grid Layout and Comics
      CSS Grid Layout and Comics by Envato Tuts+
      Auto Hexagonal CSS Grid Layout
      Auto Hexagonal CSS Grid Layout by Kseso
      CSS Grid Layout with @support Flexbox Fallback
      CSS Grid Layout with @support Flexbox Fallback by Gustaf Holm
      Image Areas in CSS Grid Layout
      Image Areas in CSS Grid Layout by Michael Gehrmann
      Mondrian Art in CSS Grid
      Mondrian Art in CSS Grid by Jen Simmons
      CSS Grid Layout Slideshow
      CSS Grid Layout Slideshow by Manoela Ilic

      Join In!

      Want to be a part of it? Great, we’d love to see what you’ll come up with!

      • Once you’ve completed your shiny CSS Grid layout, please send us a link to cssgrid@smashingmagazine.com (a CodePen link works just fine),
      • The deadline is September 30.

      Ready to take on the challenge? Let’s go! We’re already looking forward to your submissions. Have fun!