Menu Search
Jump to the content X X

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. Firefox even has a CSS Grid Inspector1 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?

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

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 20172,
  • a Smashing workshop of your choice,
  • a signed edition of our upcoming book Design Systems3 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

Demos Link

Tutorials Link

Talks Link

Inspiration Link

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

Responsive Magazine Layout16
Responsive Magazine Layout17 by Heather Buchel
Minimalistic CSS Grid Layout18
Minimalistic CSS Grid Layout19 by Nate Green
CSS Grid Layout and Comics20
CSS Grid Layout and Comics21 by Envato Tuts+
Auto Hexagonal CSS Grid Layout22
Auto Hexagonal CSS Grid Layout23 by Kseso
CSS Grid Layout with @support Flexbox Fallback24
CSS Grid Layout with @support Flexbox Fallback25 by Gustaf Holm
Image Areas in CSS Grid Layout26
Image Areas in CSS Grid Layout27 by Michael Gehrmann
Mondrian Art in CSS Grid28
Mondrian Art in CSS Grid29 by Jen Simmons
CSS Grid Layout Slideshow30
CSS Grid Layout Slideshow31 by Manoela Ilic

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 top Tweet itShare on Facebook

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs front-end/UX workshops, webinars and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

  1. 1

    Venkateshwar k

    September 6, 2017 8:35 pm

    Wow.. nice prizes. Specially the first.. Good luck guys!!

    5
  2. 2

    Hi,

    Wow.. nice prizes

    Thank you

    0
  3. 3

    The last prize is sweeet!

    0
  4. 4

    I’ve made a chrome extension to perform CSS grid inspection.
    looking for some feedback and corner cases
    https://chrome.google.com/webstore/detail/gridman-css-grid-inspecto/cmplbmppmfboedgkkelpkfgaakabpicn

    2
  5. 5

    Todor Velichkov

    September 10, 2017 4:38 pm

    Is this International? Is only one submission per person or you can submit more?

    1
  6. 6

    Why are we still worrying about IE8 and IE9 for a contest like this? Seems like overkill.

    3
    • 7

      I doesn’t feel like “worrying” to me, but modern designs should not break and be accessible in every browser, don’t you think? I’m pretty sure nobody expects the layout to look the same in every browser, though.

      0
      • 8

        Actually I don’t think support for browsers such as IE 8 or IE9 is at all necessary. It actually encourages people not to upgrade to more secure and better browsers.

        -1

Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top