About The Author

Cosima has been an editor at SmashingMag since 2013. Whenever she’s not writing articles for the bi-weekly Smashing Newsletter or the Quick Tips series, … More about Cosima Mielke

CSS Grid Challenge: Winners and Templates

      CSS Grid is becoming the new layout standard for the web, and we are all still experimenting with what we can achieve with it.

      One of the main reasons behind the idea of the CSS Grid Challenge was to have some starting points for layouts, and show what can be achieved with CSS Grids today. Well, we received some many great submissions that it was really hard to choose the one winner — there are so many submissions who deserve to win first place.

      While the browser support for CSS Grid is really good already, it isn’t supported in the older browser versions. That’s why we challenged you to implement fallbacks for browsers that don’t support CSS Grid just yet, and most of the submissions were doing fine in that regard. Falling back to floats and Flexbox isn’t hard, but still not all submissions were providing fallbacks for browsers that don’t support CSS Grid. We had to deduct some points in these cases, unfortunately.

      So without a further ado, let’s look at the submissions which we think are the most impressive ones:

      ? The Winner Of The CSS Grid Challenge 2017 Is… James Clarke!

      James Clarke’s CSS-only The Deck (download the template, ZIP, 1.3MB) is particularly well suited for a linear narrative that you might find in presentations or marketing pages. What we think was particularly interesting is the cross-horizontal way to navigate between the different pages. Also, we like the use of lots of whitespace, so that the focus of each page remains perfectly obvious.

      Please keep in mind: This template isn’t keyboard-accessible and we’re working with James to improve it.

      The Deck by James Clarke
      View the submission

      On smaller devices, the template turns into a regular layout, and it falls back graciously on browsers that don’t support CSS Grid. Ladies and Gents, a big round of applause for the winner of the CSS Grid challenge!

      Insights from James himself:

      "As CSS grid layout is new technology and sits atop many other advances that have been built into CSS, I chose to limit myself to see what I could build with HTML and CSS alone. I elected to rebuild an old website from about 10years ago that was built using the then-popular "MooTools" javascript library. That library opened up the ease of cross-browser javascript development at the time, and the advance in CSS's capabilities seemed to offer a similar possibility. The result of my efforts I call "Deck". It is a format that is particularly well suited to the sort of linear narrative that you might find in a power-point presentation, or marketing pages. The standard these days is a long-scrolling page. That format works well of course, but it is undifferentiated, and we've been stuck with it for years now. I wanted to explore something a bit different, in hopes of finding a new way." Features: CSS only, no javascript. All interactions flow from native browser functions and CSS pseudo-selectors like :checked, :target. CSS Grid Layout: horizontal and vertical positioning, source re-ordering, adaptation to different viewports. Progressive-enhancement, responsive layouts: Smaller screen devices and older browsers receive a format catered to their needs and technologies. Touch friendly: All UI functions play well with touch-screen laptops/tablets/phones. Back/Forward button navigation: Back and forward buttons remain functional where browser support exists (current issues with MS Edge repainting when not initiated by javascript 'hash-change' event).

      But Wait… There’s More!

      We received a number of really impressive submissions and so we decided to give out a silver as well as a bronze medal, too!

      ? Second Place: Frida Nyvall

      The second place goes to The Daily Prophet, a fictional newspaper for wizards built with Grid. It’s a great example for multi-column layouts that respond to smaller screen sizes. You can tell that the creator put a lot of effort into building this page with its subtle animations, using CSS Shapes, and a very thoughtful transformation of layout throughout all the different screen sizes. The only downside here is that the submission is not working in browsers that don’t support CSS Grid.

      A screenshot of the Daily Prophet, a phantasy, multi-column layout website built with CSS Grid
      A screenshot of the Daily Prophet, a phantasy, multi-column layout website built with CSS Grid. Go to the project: link
      Click to see how the site transforms over various screen sizes.
      #### ? Third Place: Victor Janin The third place goes to [Victor Janin](https://codepen.io/victorjanin/full/oGYvjK/): A great example of a demo that moves elements around in the grid from mobile to desktop. Victor's aim was to better accommodate the needs of the user in each viewport, and we think he did a brilliant job doing that! The CodePen code doesn’t include all the prefixes and adjustments for Edge and IE but [this live page](http://victorjan.in/boarding/) has all the prefixes and works on Edge and IE 11 in place. The content is available down to IE8.
      CSS Grid by Victor Janin
      View on CodePen

      The winners have already been contacted. For those who didn’t receive an email from us — please stay tuned! We’ll be launching another challenge very soon!

      Other Submissions

      Again, we’re sorry that we only had to choose a limited amount of winners, and want to thank everyone who participated in this challenge — we sincerely appreciate your time and efforts! Another round of applause for the rest of the talented participants and their submissions:

      Sam Beckham

      Sam Beckham is a fan of Penguin Books and their marber grid. His CSS take on the subject lets you change the colors, font sizes, and everything else you fancy on individual books using BEM notation. You can also view a version that works in IE8 (apart from the SVGs) here.

      CSS Grid by Sam Beckham
      View on CodePen

      Ren Aysha

      A thumbnail presentation with CSS Grid, inspired by Polygon.com’s bevel treatment on some of their thumbnails. Older browsers get a fallback with a conservative thumbnail look instead. Apart from her contest submission, you’ll find more CSS Grid experiments on Ren’s CodePen.

      CSS Grid by Ren Aysha
      View on CodePen

      Trang B. Nguyen

      This layout features some lovely sea creatures, a bottom navigation, as well as an different way to navigate through the various sections of the site. Also, it falls back really good in browsers that don’t support CSS Grid.

      See the Pen CSS Grid Layout by Trang B. Nguyen (@Trangbnguyen) on CodePen.

      Click to see how the layout behaves on bigger screens.
      #### Charles Wong Beethoven’s “Ode to Joy” as a responsive sheet music page. It consists of two CSS grid layouts - one for positioning the bars within the rows of sheet music, and one for positioning musical notes within the bars. Charles shares more insights into the project [here](https://sejikco.github.io/CssGridSheetMusic/).
      CSS Grid by Charles Sejikco
      View on Github

      Dannie Vinther

      A Marvel poster made with CSS and Clip-path. A sprinkle of JavaScript helps avoid layout reflow when images are fully loaded.

      CSS Grid by Dannie Vinther
      View on CodePen

      Erik Davidsson

      A great one for football fans! A layout featuring the upcoming football game between FC Barcelona and Real Madrid. Erik brought it to life with many different techniques with fallbacks to make the website usable in older browsers such as IE8 and IE9.

      CSS Grid by Erik Davidsson
      (CodePen) (GitHub)
      #### Mathieu Inspired by [Justin Avery’s CodePen](https://codepen.io/justincavery/pen/yaRLYE/), Mathieu submitted a dynamic periodic table built with CSS Grid.
      CSS Grid by Mathieu
      View on Github
      #### Amy DeVoogd Inspired by the works of Jen Simmons and Rachel Andrew, [Spacebar](https://amydevoogd.github.io/product-showcase/) is a product showcase for a completely invented product that Amy branded and designed, i.e. all imagery is copyright-free.
      CSS Grid by Amy DeVoogd
      View on GitHub
      #### Ieva Ozolīte A mobile-first semantic web page for a [band poster](https://www.swissted.com/products/the-cure-at-canterbury-odeon-1979). Quite impressive for a first experiment with CSS Grid, don't you agree?
      CSS Grid by Ieva Ozolīte
      View on CodePen
      #### Ethan Horger The goal here was to try out a blog entry layout that Ethan has always wanted to try, in which the author's bio would always be displayed on the top-left of the article, legal notices at the bottom, and some kind of quote or supplemental material pinned in the middle of the article. With CSS Grid, the layout degrades to using floats in IE 8 and 9, and doesn't maintain the article quote in the middle of the article, but is otherwise fully readable.
      CSS Grid by Ethan Horger
      View on CodePen
      #### Tanya Syrygina Tanya Syrygina used Grid to built a fresh, card-style blog layout.
      CSS Grid by Tanya Syrygina
      View on CodePen
      #### Nelson Leite For an e-commerce project, Nelson Leite needed to showcase a product listing with some other content in the middle of the products, displayed differently. His solution: CSS Grid.
      CSS Grid by Nelson Leite
      View on CodePen
      #### Robert Mion Robert Mion combined CSS Grid and Flexbox to build a responsive supermarket add.
      CSS Grid by Robert Mion
      View on CodePen
      #### Arturo Ríos A CSS Grid that can be used comfortably in full-screen mode comes from Arturo Ríos.
      CSS Grid by Arturo Ríos
      View on CodePen
      #### Bob Mitro A simple, responsive blog theme based on CSS Grid layout.
      CSS Grid by Bob Mitro
      View demo
      #### Kev Bonett Kev Bonnet created a mobile-first e-commerce template with fallback to Flexbox, then fallback to basic 2-column inline-block.
      CSS Grid by Kev Bonett
      View on CodePen
      #### Sven Rothe Sven Rothe’s grid has equal heights over several rows. So if you add more content in a tile in the first row, the second row will increase, too.
      CSS Grid by Sven Rothe
      View on CodePen
      #### Ismail Ghallou With his To-Do app layout, Ismail Ghallou proves that CSS Grid can handle even the weirdest layouts. And it’s responsive, too.
      CSS Grid by Ismail Ghallou
      View on CodePen
      #### Juan Garcia A page of a video game platform comes from Juan Garcia.
      CSS Grid by Juan Garcia
      View on CodePen
      #### Mark McMurray A multi-column layout as a CV requires it is a perfect CSS Grid project as Mark McMurray proves.
      CSS Grid by Mark McMurray
      View on CodePen
      #### Marissa Douglass Ever thought of building an interactive cookbook with CSS Grid? Marissa Douglass did.
      CSS Grid by Marissa Douglass
      View on CodePen
      #### Melissa Bogemanns A photo showcase made with CSS Grid. Available as [.zip](https://www.dropbox.com/s/qftfb4cvyvcdcwc/css_grid_layout.zip?dl=0) (6MB)
      CSS Grid by Melissa Bogemanns
      #### Tyler Argo Tyler Argo re-built the Google Play Store layout from scratch using CSS Grid with fallbacks. It works all the way back to IE9 and is even more responsive than the original site.
      CSS Grid by Tyler Argo
      View on CodePen
      #### Mauricio Mantilla This layout is based on a [website](https://cerosetenta.uniandes.edu.co/) that was designed by the company where Mauricio works at. He took part of the layout, which is based on Packery (Masonry) and port it to grid with just a few lines of CSS Grid.
      CSS Grid by Mauricio Mantilla
      View on CodePen
      #### Katherine Kato A portfolio website layout made with CSS Grid and Flexbox as a fallback.
      CSS Grid by Katherine Kato
      View on CodePen
      #### Donny Truong A minimalistic blog layout comes from Donny Truong.
      CSS Grid by Donny Truong
      View demo
      #### Anenth Vishnu A responsive app layout based on Grid.
      CSS Grid by Anenth Vishnu
      View on CodePen
      #### Amy Carney A basic layout (with IE fallbacks and web accessibility in mind) that may be useful for getting projects started or migrated.
      CSS Grid by Amy Carney
      View on CodePen
      #### Nurçin Özer Nurçin Özer submitted a basic blog layout.
      CSS Grid by Nurçin Özer
      View on CodePen
      #### Remy Oleszczuk Inspired by the BBC SPORT landing page.
      CSS Grid by Remy Oleszczuk
      View on CodePen
      #### Patryk Kalwas
      CSS Grid by Patryk Kalwas
      View on CodePen
      #### Jesús Olazagoitia
      CSS Grid by Jesús Olazagoitia
      View on CodePen
      #### Dóra Pölöskei
      CSS Grid by Dóra Pölöskei
      View on CodePen
      #### Vivek Singh
      CSS Grid by Vivek Singh
      View on CodePen
      #### Pranjal Nadhani
      CSS Grid by Pranjal Nadhani
      View on CodePen
      #### Mathias Herrebaut
      CSS Grid by Mathias Herrebaut
      View on CodePen
      #### Noel Tekiri
      CSS Grid by Noel Tekiri
      View in action
      #### Aurélie Deschacht
      CSS Grid by Aurélie Deschacht
      Download project ZIP file
      #### Jonathan Harrell
      CSS Grid by Jonathan Harrell
      View in action
      NameSubmission
      Amy DeVoogdPreview template
      AnenthPreview template
      Tyler ArgoPreview template
      Arturo RíosPreview template
      Aurélie DeschachtDownload template
      Kev BonettPreview template
      Bob MitroPreview template
      Amy CarneyPreview template
      Dannie VintherPreview template
      Donny TruongPreview template
      Dóra PölöskeiPreview template
      Erik DavidssonPreview template
      Ethan HorgerPreview template
      Jonathan HarrellPreview template
      Ieva OzolītePreview template
      Ismail GhallouPreview template
      Jesús OlazagoitiaPreview template
      Juan GarciaPreview template
      Katherine KatoPreview template
      Marissa DouglassPreview template
      Mathias HerrebautPreview template
      Mauricio MantillaPreview template
      Melissa BogemannsDownload template
      Robert MionPreview template
      Nelson LeitePreview template
      Patryk KalwasPreview template
      Pranjal NadhaniPreview template
      MathieuPreview template
      Nurçin ÖzerPreview template
      Remy OleszczukPreview template
      Ren AyshaPreview template
      Mark McMurrayPreview template
      Sven RothePreview template
      Sam BeckhamPreview template
      Charles SejikcoPreview template
      Tanya SyryginaPreview template
      Noel TekiriPreview template
      Trang NguyenPreview template
      Vivek SinghPreview template
      ### 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

      Ever thought of building an interactive cookbook with CSS Grid? Marissa Douglass did.

      CSS Grid by Marissa Douglass
      View on CodePen

      Melissa Bogemanns

      A photo showcase made with CSS Grid. Available as .zip (6MB)

      CSS Grid by Melissa Bogemanns

      Tyler Argo

      Tyler Argo re-built the Google Play Store layout from scratch using CSS Grid with fallbacks. It works all the way back to IE9 and is even more responsive than the original site.

      CSS Grid by Tyler Argo
      View on CodePen

      Mauricio Mantilla

      This layout is based on a website that was designed by the company where Mauricio works at. He took part of the layout, which is based on Packery (Masonry) and port it to grid with just a few lines of CSS Grid.

      CSS Grid by Mauricio Mantilla
      View on CodePen

      Katherine Kato

      A portfolio website layout made with CSS Grid and Flexbox as a fallback.

      CSS Grid by Katherine Kato
      View on CodePen

      Donny Truong

      A minimalistic blog layout comes from Donny Truong.

      CSS Grid by Donny Truong
      View demo

      Anenth Vishnu

      A responsive app layout based on Grid.

      CSS Grid by Anenth Vishnu
      View on CodePen

      Amy Carney

      A basic layout (with IE fallbacks and web accessibility in mind) that may be useful for getting projects started or migrated.

      CSS Grid by Amy Carney
      View on CodePen

      Nurçin Özer

      Nurçin Özer submitted a basic blog layout.

      CSS Grid by Nurçin Özer
      View on CodePen

      Remy Oleszczuk

      Inspired by the BBC SPORT landing page.

      CSS Grid by Remy Oleszczuk
      View on CodePen

      Patryk Kalwas

      CSS Grid by Patryk Kalwas
      View on CodePen

      Jesús Olazagoitia

      CSS Grid by Jesús Olazagoitia
      View on CodePen

      Dóra Pölöskei

      CSS Grid by Dóra Pölöskei
      View on CodePen

      Vivek Singh

      CSS Grid by Vivek Singh
      View on CodePen

      Pranjal Nadhani

      CSS Grid by Pranjal Nadhani
      View on CodePen

      Mathias Herrebaut

      CSS Grid by Mathias Herrebaut
      View on CodePen

      Noel Tekiri

      CSS Grid by Noel Tekiri
      View in action

      Aurélie Deschacht

      CSS Grid by Aurélie Deschacht
      Download project ZIP file

      Jonathan Harrell

      CSS Grid by Jonathan Harrell
      View in action
      NameSubmission
      Amy DeVoogdPreview template
      AnenthPreview template
      Tyler ArgoPreview template
      Arturo RíosPreview template
      Aurélie DeschachtDownload template
      Kev BonettPreview template
      Bob MitroPreview template
      Amy CarneyPreview template
      Dannie VintherPreview template
      Donny TruongPreview template
      Dóra PölöskeiPreview template
      Erik DavidssonPreview template
      Ethan HorgerPreview template
      Jonathan HarrellPreview template
      Ieva OzolītePreview template
      Ismail GhallouPreview template
      Jesús OlazagoitiaPreview template
      Juan GarciaPreview template
      Katherine KatoPreview template
      Marissa DouglassPreview template
      Mathias HerrebautPreview template
      Mauricio MantillaPreview template
      Melissa BogemannsDownload template
      Robert MionPreview template
      Nelson LeitePreview template
      Patryk KalwasPreview template
      Pranjal NadhaniPreview template
      MathieuPreview template
      Nurçin ÖzerPreview template
      Remy OleszczukPreview template
      Ren AyshaPreview template
      Mark McMurrayPreview template
      Sven RothePreview template
      Sam BeckhamPreview template
      Charles SejikcoPreview template
      Tanya SyryginaPreview template
      Noel TekiriPreview template
      Trang NguyenPreview template
      Vivek SinghPreview template

      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

      Are You Ready For The Next Challenge?

      That’s right! There will be more challenges coming up very soon, and even more prizes to win! Keep an eye on the magazine or follow us on Twitter so you don’t miss out next time.

      Smashing Editorial (ms, vf, il)