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

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

• By Vitaly Friedman
• September 6th, 2017
• CSSCSS Grid
• 5 Comments

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. Firefox even has a CSS Grid Inspector¹ built in, so that there’s nothing to hold you back from making even the most challenging flexible layout reality.

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?

The Challenge Link

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? Link

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 Link

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 Link

• Grid Garden⁴: A game for learning CSS Grid
• GridBugs⁵: A community-curated list of bugs, incomplete implementations and interop issues
• Awesome CSS Grid⁶: A manually curated list of CSS resources
• Grid by Example⁷: Examples, videos and other information to help you learn CSS Grid Layout
• Rachel Andrew’s Grid Guide⁸: the complete guide to Box Alignment, Flexbox, and Grid
• CSS Grid Layout⁹: Examples, references and guides by the Mozilla team
• Chrome CSS Grid Highlighter¹⁰: a little Chrome extension that highlights CSS grids.

Demos Link

• Jen Simmons’ CSS Grid Demos¹¹: Demos and examples of how Grid works
• CSS Grid Layout on CodePen¹²: A collection of layouts built with CSS Grid

Tutorials Link

• Building Production-Ready CSS Grid Layouts Today¹³ by Morten Rand-Hendriksen
• Progressively Enhancing CSS Layout¹⁴ by Manuel Matuzović
• Getting Started With CSS Grid¹⁵ by Chris Brandrick

Talks Link

Inspiration Link

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

¹⁶

¹⁸

²⁰

²²

²⁴

²⁶

²⁸

³⁰

Join In! Link

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!

Footnotes Link

1. 1 https://hacks.mozilla.org/2017/06/new-css-grid-layout-panel-in-firefox-nightly/
2. 2 http://smashingconf.com/barcelona-2017/
3. 3 https://www.smashingmagazine.com/design-systems-book/
4. 4 http://cssgridgarden.com/
5. 5 https://github.com/rachelandrew/gridbugs
6. 6 https://github.com/valentinogagliardi/awesome-css-grid
7. 7 https://gridbyexample.com/
8. 8 https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/
9. 9 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
10. 10 https://github.com/ademilter/chrome-css-grid-highlighter
11. 11 http://labs.jensimmons.com/
12. 12 https://codepen.io/collection/XRRJGq/
13. 13 https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout/
14. 14 https://www.smashingmagazine.com/2017/07/enhancing-css-layout-floats-flexbox-grid/
15. 15 https://hackernoon.com/getting-started-with-css-grid-layout-8e00de547daf
16. 16 https://codepen.io/hbuchel/pen/qOxGzW
17. 17 https://codepen.io/hbuchel/pen/qOxGzW
18. 18 https://codepen.io/nategreen/pen/GpRLXY
19. 19 https://codepen.io/nategreen/pen/GpRLXY
20. 20 https://codepen.io/tutsplus/pen/pNgZpj
21. 21 https://codepen.io/tutsplus/pen/pNgZpj
22. 22 https://codepen.io/Kseso/pen/xqNdmO
23. 23 https://codepen.io/Kseso/pen/xqNdmO
24. 24 https://codepen.io/primalivet/pen/ryjKmV
25. 25 https://codepen.io/primalivet/pen/ryjKmV
26. 26 https://codepen.io/g12n/pen/PPpGvL
27. 27 https://codepen.io/g12n/pen/PPpGvL
28. 28 https://codepen.io/jensimmons/pen/aNjXLz
29. 29 https://codepen.io/jensimmons/pen/aNjXLz
30. 30 https://tympanus.net/Development/GridLayoutSlideshow/
31. 31 https://tympanus.net/Development/GridLayoutSlideshow/

↑ Back to topTweet itShare on Facebook