CSS Grid1 is the new layout standard for the web, but we still are just getting started with new layout ideas. Many assume that CSS Grid is just a replacement for table layouts, but that’s simply not true. Others might think that we can use CSS Grid to replicate more advanced print layouts, which brings us closer to what’s possible.
One of the main reasons behind the idea of the CSS Grid Challenge2 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 support3 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 Flexbox4 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! Link
James Clarke’s CSS-only The Deck5 (download the template6, 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.
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:
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.”
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.
But Wait… There’s More! Link
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 Link
The second place goes to The Daily Prophet9, 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.
🥉 Third Place: Victor Janin Link
The third place goes to Victor Janin12: 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 page13 has all the prefixes and works on Edge and IE 11 in place. The content is available down to IE8.
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 Link
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 Link
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) here16.
Ren Aysha Link
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 CodePen19.
Trang B. Nguyen Link
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.
Charles Wong Link
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 here25.
Dannie Vinther Link
Erik Davidsson Link
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.
Amy DeVoogd Link
Ieva Ozolīte Link
Ethan Horger Link
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.
Tanya Syrygina Link
Tanya Syrygina used Grid to built a fresh, card-style blog layout.
Nelson Leite Link
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.
Robert Mion Link
Robert Mion combined CSS Grid and Flexbox to build a responsive supermarket add.
Arturo Ríos Link
A CSS Grid that can be used comfortably in full-screen mode comes from Arturo Ríos.
Bob Mitro Link
A simple, responsive blog theme based on CSS Grid layout.
Kev Bonett Link
Kev Bonnet created a mobile-first e-commerce template with fallback to Flexbox, then fallback to basic 2-column inline-block.
Sven Rothe Link
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.
Ismail Ghallou Link
With his To-Do app layout, Ismail Ghallou proves that CSS Grid can handle even the weirdest layouts. And it’s responsive, too.
Juan Garcia Link
A page of a video game platform comes from Juan Garcia.
Mark McMurray Link
A multi-column layout as a CV requires it is a perfect CSS Grid project as Mark McMurray proves.
Marissa Douglass Link
Ever thought of building an interactive cookbook with CSS Grid? Marissa Douglass did.
Melissa Bogemanns Link
Tyler Argo Link
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.
Mauricio Mantilla Link
This layout is based on a website69 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.
Katherine Kato Link
A portfolio website layout made with CSS Grid and Flexbox as a fallback.
Donny Truong Link
A minimalistic blog layout comes from Donny Truong.
Anenth Vishnu Link
A responsive app layout based on Grid.
Amy Carney Link
A basic layout (with IE fallbacks and web accessibility in mind) that may be useful for getting projects started or migrated.
Nurçin Özer Link
Nurçin Özer submitted a basic blog layout.
Remy Oleszczuk Link
Inspired by the BBC SPORT landing page.
Patryk Kalwas Link
Jesús Olazagoitia Link
Dóra Pölöskei Link
Vivek Singh Link
Pranjal Nadhani Link
Mathias Herrebaut Link
Noel Tekiri Link
Aurélie Deschacht Link
Jonathan Harrell Link
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 Garden141: A game for learning CSS Grid
- GridBugs142: A community-curated list of bugs, incomplete implementations and interop issues
- Awesome CSS Grid143: A manually curated list of CSS resources
- Grid by Example144: Examples, videos and other information to help you learn CSS Grid Layout
- Rachel Andrew’s Grid Guide145: the complete guide to Box Alignment, Flexbox, and Grid
- CSS Grid Layout146: Examples, references and guides by the Mozilla team
- Chrome CSS Grid Highlighter147: a little Chrome extension that highlights CSS grids.
- Jen Simmons’ CSS Grid Demos148: Demos and examples of how Grid works
- CSS Grid Layout on CodePen149: A collection of layouts built with CSS Grid
- Building Production-Ready CSS Grid Layouts Today150 by Morten Rand-Hendriksen
- Progressively Enhancing CSS Layout151 by Manuel Matuzović
- Getting Started With CSS Grid152 by Chris Brandrick
Finally, to get your ideas flowing, some inspiring CodePen experiments that illustrate the magic of CSS Grid:
Are You Ready For The Next Challenge? Link
(ms, vf, il)
- 1 https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/
- 2 https://www.smashingmagazine.com/2017/09/the-css-grid-challenge-join-in/
- 3 https://caniuse.com/?feat=css-grid#feat=css-grid
- 4 https://www.smashingmagazine.com/2017/07/enhancing-css-layout-floats-flexbox-grid/
- 5 http://www.hi.agency/deck/
- 6 http://provide.smashingmagazine.com/css-grid-challenge/deck-css-grid-template.zip
- 7 http://www.hi.agency/deck/
- 8 http://www.hi.agency/deck/
- 9 http://redonion.se/cssgrid/
- 10 http://redonion.se/cssgrid/
- 11 http://redonion.se/cssgrid/
- 12 https://codepen.io/victorjanin/full/oGYvjK/
- 13 http://victorjan.in/boarding/
- 14 https://codepen.io/victorjanin/full/oGYvjK/
- 15 https://codepen.io/victorjanin/full/oGYvjK/
- 16 https://codepen.io/samdbeckham/pen/MEKYPd?editors=1100
- 17 https://codepen.io/samdbeckham/pen/Naxxgy?editors=1100
- 18 https://codepen.io/samdbeckham/pen/Naxxgy?editors=1100
- 19 https://codepen.io/collection/nvggZM/
- 20 https://codepen.io/rrenula/pen/VMWMWx
- 21 https://codepen.io/rrenula/pen/VMWMWx
- 22 https://codepen.io/Trangbnguyen/pen/GMNQGN/
- 23 https://codepen.io/Trangbnguyen
- 24 https://codepen.io
- 25 https://sejikco.github.io/CssGridSheetMusic/
- 26 https://github.com/Sejikco/CssGridSheetMusic
- 27 https://github.com/Sejikco/CssGridSheetMusic
- 28 https://codepen.io/dannievinther/pen/EvVggR
- 29 https://codepen.io/dannievinther/pen/EvVggR
- 30 https://erikdson.github.io/smashing-grid-challenge/
- 31 https://erikdson.github.io/smashing-grid-challenge/
- 32 https://github.com/erikdson/smashing-grid-challenge
- 33 https://codepen.io/justincavery/pen/yaRLYE/
- 34 https://github.com/pulsardev/mendelable
- 35 https://github.com/pulsardev/mendelable
- 36 https://amydevoogd.github.io/product-showcase/
- 37 https://amydevoogd.github.io/product-showcase/
- 38 https://github.com/amydevoogd/product-showcase
- 39 https://www.swissted.com/products/the-cure-at-canterbury-odeon-1979
- 40 https://codepen.io/IevaOzolite/pen/xdaVJq
- 41 https://codepen.io/IevaOzolite/pen/xdaVJq
- 42 https://codepen.io/wing-zero/pen/MEvaBQ
- 43 https://codepen.io/wing-zero/pen/MEvaBQ
- 44 https://codepen.io/TanyaS/pen/OxWwew
- 45 https://codepen.io/TanyaS/pen/OxWwew
- 46 https://codepen.io/nelsonleite/full/aygNVv/
- 47 https://codepen.io/nelsonleite/full/aygNVv/
- 48 https://codepen.io/beginnr/full/brbKWX/
- 49 https://codepen.io/beginnr/full/brbKWX/
- 50 https://codepen.io/arturios/full/Evzzyx/
- 51 https://codepen.io/arturios/full/Evzzyx/
- 52 https://getpublii.com/themes/demo/starter/
- 53 https://getpublii.com/themes/demo/starter/
- 54 https://codepen.io/basherkev/pen/PjKQKM
- 55 https://codepen.io/basherkev/pen/PjKQKM
- 56 https://codepen.io/w3work/pen/PKvNKa
- 57 https://codepen.io/w3work/pen/PKvNKa
- 58 https://codepen.io/Smakosh/pen/BwQBpW
- 59 https://codepen.io/Smakosh/pen/BwQBpW
- 60 https://codepen.io/-J0hn-/full/xLvKLx
- 61 https://codepen.io/-J0hn-/full/xLvKLx
- 62 https://codepen.io/requestingmark/full/eGWprx/
- 63 https://codepen.io/requestingmark/full/eGWprx/
- 64 https://codepen.io/mdouglass/pen/aLwKKL
- 65 https://codepen.io/mdouglass/pen/aLwKKL
- 66 https://www.dropbox.com/s/qftfb4cvyvcdcwc/css_grid_layout.zip?dl=0
- 67 https://codepen.io/argo49/pen/jGbXBp?editors=1100
- 68 https://codepen.io/argo49/pen/jGbXBp?editors=1100
- 69 https://cerosetenta.uniandes.edu.co/
- 70 https://codepen.io/Mantish/full/Oxgbbq
- 71 https://codepen.io/Mantish/full/Oxgbbq
- 72 https://codepen.io/kathykato/pen/JrJwrY
- 73 https://codepen.io/kathykato/pen/JrJwrY
- 74 https://www.visualgui.com/
- 75 https://www.visualgui.com/
- 76 https://codepen.io/Anenth/full/wrKmNd/
- 77 https://codepen.io/Anenth/full/wrKmNd/
- 78 https://codepen.io/digilou/pen/wrwJGV
- 79 https://codepen.io/digilou/pen/wrwJGV
- 80 https://codepen.io/nurcin/pen/WZNbbq
- 81 https://codepen.io/nurcin/pen/WZNbbq
- 82 https://codepen.io/remyo/full/rGjZML/
- 83 https://codepen.io/remyo/full/rGjZML/
- 84 https://codepen.io/kalwas/pen/VMbNxz
- 85 https://codepen.io/kalwas/pen/VMbNxz
- 86 https://codepen.io/goiblas/pen/pWwRLa
- 87 https://codepen.io/goiblas/pen/pWwRLa
- 88 https://codepen.io/dododesign/pen/xXrJme
- 89 https://codepen.io/dododesign/pen/xXrJme
- 90 https://codepen.io/viiv3k/pen/eGEOqR
- 91 https://codepen.io/viiv3k/pen/eGEOqR
- 92 https://codepen.io/pranjalnadhaniUC/pen/MEpGMj
- 93 https://codepen.io/pranjalnadhaniUC/pen/MEpGMj
- 94 https://codepen.io/m_herrebaut/pen/pWdErd
- 95 https://codepen.io/m_herrebaut/pen/pWdErd
- 96 http://sicontis.tk/301-days/projects/css-grid-01/
- 97 http://sicontis.tk/301-days/projects/css-grid-01/
- 98 https://www.dropbox.com/s/aiixb5gk9su4gbo/CSS%20GRID.zip?dl=0
- 99 https://www.dropbox.com/s/aiixb5gk9su4gbo/CSS%20GRID.zip?dl=0
- 100 https://jonathan-harrell.com/experiment/contextual-callouts-with-css-grid/
- 101 https://jonathan-harrell.com/experiment/contextual-callouts-with-css-grid/
- 102 https://amydevoogd.github.io/product-showcase/
- 103 https://codepen.io/Anenth/full/wrKmNd/
- 104 https://codepen.io/argo49/pen/jGbXBp?editors=1100
- 105 https://codepen.io/arturios/full/Evzzyx/
- 106 https://www.dropbox.com/s/aiixb5gk9su4gbo/CSS%20GRID.zip?dl=0
- 107 https://codepen.io/basherkev/pen/PjKQKM
- 108 https://getpublii.com/themes/demo/starter/
- 109 https://codepen.io/digilou/pen/wrwJGV
- 110 https://codepen.io/dannievinther/pen/EvVggR
- 111 https://www.visualgui.com/
- 112 https://codepen.io/dododesign/pen/xXrJme
- 113 https://erikdson.github.io/smashing-grid-challenge/
- 114 https://codepen.io/wing-zero/pen/MEvaBQ
- 115 https://jonathan-harrell.com/experiment/contextual-callouts-with-css-grid/
- 116 https://codepen.io/IevaOzolite/pen/xdaVJq
- 117 https://codepen.io/Smakosh/pen/BwQBpW
- 118 https://codepen.io/goiblas/pen/pWwRLa
- 119 https://codepen.io/-J0hn-/full/xLvKLx
- 120 https://codepen.io/kathykato/pen/JrJwrY
- 121 https://codepen.io/mdouglass/pen/aLwKKL
- 122 https://codepen.io/digilou/pen/wrwJGV
- 123 https://codepen.io/Mantish/full/Oxgbbq
- 124 https://www.dropbox.com/s/qftfb4cvyvcdcwc/css_grid_layout.zip?dl=0
- 125 https://codepen.io/beginnr/full/brbKWX/
- 126 https://codepen.io/nelsonleite/full/aygNVv/
- 127 https://codepen.io/kalwas/pen/VMbNxz
- 128 https://codepen.io/pranjalnadhaniUC/pen/MEpGMj
- 129 https://pulsardev.github.io/mendelable/
- 130 https://codepen.io/nurcin/pen/WZNbbq
- 131 https://codepen.io/remyo/full/rGjZML/
- 132 https://codepen.io/rrenula/pen/LzLXYJ
- 133 https://codepen.io/requestingmark/full/eGWprx/
- 134 https://codepen.io/w3work/pen/PKvNKa
- 135 https://codepen.io/samdbeckham/pen/Naxxgy?editors=1100
- 136 https://github.com/Sejikco/CssGridSheetMusic
- 137 https://codepen.io/TanyaS/pen/OxWwew
- 138 http://sicontis.tk/301-days/projects/css-grid-01/
- 139 https://codepen.io/Trangbnguyen/pen/GMNQGN/
- 140 https://codepen.io/viiv3k/pen/eGEOqR
- 141 http://cssgridgarden.com/
- 142 https://github.com/rachelandrew/gridbugs
- 143 https://github.com/valentinogagliardi/awesome-css-grid
- 144 https://gridbyexample.com/
- 145 https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/
- 146 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
- 147 https://github.com/ademilter/chrome-css-grid-highlighter
- 148 http://labs.jensimmons.com/
- 149 https://codepen.io/collection/XRRJGq/
- 150 https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout/
- 151 https://www.smashingmagazine.com/2017/07/enhancing-css-layout-floats-flexbox-grid/
- 152 https://hackernoon.com/getting-started-with-css-grid-layout-8e00de547daf
- 153 https://codepen.io/hbuchel/pen/qOxGzW
- 154 https://codepen.io/hbuchel/pen/qOxGzW
- 155 https://codepen.io/nategreen/pen/GpRLXY
- 156 https://codepen.io/nategreen/pen/GpRLXY
- 157 https://codepen.io/tutsplus/pen/pNgZpj
- 158 https://codepen.io/tutsplus/pen/pNgZpj
- 159 https://codepen.io/Kseso/pen/xqNdmO
- 160 https://codepen.io/Kseso/pen/xqNdmO
- 161 https://codepen.io/primalivet/pen/ryjKmV
- 162 https://codepen.io/primalivet/pen/ryjKmV
- 163 https://codepen.io/g12n/pen/PPpGvL
- 164 https://codepen.io/g12n/pen/PPpGvL
- 165 https://codepen.io/jensimmons/pen/aNjXLz
- 166 https://codepen.io/jensimmons/pen/aNjXLz
- 167 https://tympanus.net/Development/GridLayoutSlideshow/
- 168 https://tympanus.net/Development/GridLayoutSlideshow/
- 169 https://twitter.com/smashingmag