hostmonster-Host Unlimited Domains on 1 Account   coolhandle offering reliable webhosting since 2001
Unlimited Hosting Space - FREE Site Builder   Smart Website Solutions for Your Small Business=

CSS Grid Challenge: Winners and Templates

CSS Grid Challenge: Winners and Templates

CSS Grid1 is becoming the new layout standard for the web, and we are all still experimenting with what we can achieve with it. Some folks assume that CSS Grid is just a replacement for table layouts or Flexbox2 — but that’s simply not true. Some also think that they can use CSS Grid to replicate more advanced print layouts, which brings us all closer to what’s possible. Obviously print isn’t web, but we can experiment with some of the techniques from print on the web, too.

One of the main reasons behind the idea of the CSS Grid Challenge3 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 support4 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 Flexbox5 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 Deck6 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.

The Deck by James Clarke7
View the submission8

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! 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.

A screenshot of the Daily Prophet, a phantasy, multi-column layout website built with CSS Grid10
A screenshot of the Daily Prophet, a phantasy, multi-column layout website built with CSS Grid. Go to the project: link11

Click to see how the site transforms over various screen sizes.

🥉 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.

CSS Grid by Victor Janin14
View on CodePen15

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.

CSS Grid by Sam Beckham17
View on CodePen18

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.

CSS Grid by Ren Aysha20
View on CodePen21

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.

See the Pen CSS Grid Layout22 by Trang B. Nguyen (@Trangbnguyen23) on CodePen24.

Click to see how the layout behaves on bigger screens.

Charles Sejikco 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.

CSS Grid by Charles Sejikco26
View on Github27

Dannie Vinther Link

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 Vinther28
View on CodePen29

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.

CSS Grid by Erik Davidsson30
(CodePen31) (GitHub32)

Mathieu Link

Inspired by Justin Avery’s CodePen33, Mathieu submitted a dynamic periodic table built with CSS Grid.

CSS Grid by Mathieu34
View on CodePen35

Amy DeVoogd Link

Inspired by the works of Jen Simmons and Rachel Andrew, Spacebar36 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 DeVoogd37
View on GitHub38

Ieva Ozolīte Link

A mobile-first semantic web page for a band poster39. Quite impressive for a first experiment with CSS Grid, don’t you agree?

CSS Grid by Ieva Ozolīte40
View on CodePen41

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.

CSS Grid by Ethan Horger42
View on CodePen43

Tanya Syrygina Link

Tanya Syrygina used Grid to built a fresh, card-style blog layout.

CSS Grid by Tanya Syrygina44
View on CodePen45

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.

CSS Grid by Nelson Leite46
View on CodePen47

Robert Mion Link

Robert Mion combined CSS Grid and Flexbox to build a responsive supermarket add.

CSS Grid by Robert Mion48
View on CodePen49

Arturo Ríos Link

A CSS Grid that can be used comfortably in full-screen mode comes from Arturo Ríos.

CSS Grid by Arturo Ríos50
View on CodePen51

Bob Mitro Link

A simple, responsive blog theme based on CSS Grid layout.

CSS Grid by Bob Mitro52
View demo53

Kev Bonett Link

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 Bonett54
View on CodePen55

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.

CSS Grid by Sven Rothe56
View on CodePen57

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.

CSS Grid by Ismail Ghallou58
View on CodePen59

Juan Garcia Link

A page of a video game platform comes from Juan Garcia.

CSS Grid by Juan Garcia60
View on CodePen61

Mark McMurray Link

A multi-column layout as a CV requires it is a perfect CSS Grid project as Mark McMurray proves.

CSS Grid by Mark McMurray62
View on CodePen63

Marissa Douglass Link

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

CSS Grid by Marissa Douglass64
View on CodePen65

Melissa Bogemanns Link

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

CSS Grid by Melissa Bogemanns

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.

CSS Grid by Tyler Argo67
View on CodePen68

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.

CSS Grid by Mauricio Mantilla70
View on CodePen71

Katherine Kato Link

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

CSS Grid by Katherine Kato72
View on CodePen73

Donny Truong Link

A minimalistic blog layout comes from Donny Truong.

CSS Grid by Donny Truong74
View demo75

Anenth Vishnu Link

A responsive app layout based on Grid.

CSS Grid by Anenth Vishnu76
View on CodePen77

Amy Carney Link

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 Carney78
View on CodePen79

Nurçin Özer Link

Nurçin Özer submitted a basic blog layout.

CSS Grid by Nurçin Özer80
View on CodePen81

Remy Oleszczuk Link

Inspired by the BBC SPORT landing page.

CSS Grid by Remy Oleszczuk82
View on CodePen83

Patryk Kalwas Link

CSS Grid by Patryk Kalwas84
View on CodePen85

Jesús Olazagoitia Link

CSS Grid by Jesús Olazagoitia86
View on CodePen87

Dóra Pölöskei Link

CSS Grid by Dóra Pölöskei88
View on CodePen89

Vivek Singh Link

CSS Grid by Vivek Singh90
View on CodePen91

Pranjal Nadhani Link

CSS Grid by Pranjal Nadhani92
View on CodePen93

Mathias Herrebaut Link

CSS Grid by Mathias Herrebaut94
View on CodePen95

Noel Tekiri Link

CSS Grid by Noel Tekiri96
View in action97

Aurélie Deschacht Link

CSS Grid by Aurélie Deschacht98
Download project ZIP file99

Jonathan Harrell Link

CSS Grid by Jonathan Harrell100
View in action101

Are You Ready For The Next Challenge? Link

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 Twitter141 so you don’t miss out next time.

(ms, vf, il)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout/
  2. 2 https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/
  3. 3 https://www.smashingmagazine.com/2017/09/the-css-grid-challenge-join-in/
  4. 4 https://caniuse.com/?feat=css-grid#feat=css-grid
  5. 5 https://www.smashingmagazine.com/2017/07/enhancing-css-layout-floats-flexbox-grid/
  6. 6 http://www.hi.agency/deck/
  7. 7 http://www.hi.agency/deck/
  8. 8 http://www.hi.agency/deck/
  9. 9 http://redonion.se/cssgrid/
  10. 10 http://redonion.se/cssgrid/
  11. 11 http://redonion.se/cssgrid/
  12. 12 https://codepen.io/victorjanin/full/oGYvjK/
  13. 13 http://victorjan.in/boarding/
  14. 14 https://codepen.io/victorjanin/full/oGYvjK/
  15. 15 https://codepen.io/victorjanin/full/oGYvjK/
  16. 16 https://codepen.io/samdbeckham/pen/MEKYPd?editors=1100
  17. 17 https://codepen.io/samdbeckham/pen/Naxxgy?editors=1100
  18. 18 https://codepen.io/samdbeckham/pen/Naxxgy?editors=1100
  19. 19 https://codepen.io/collection/nvggZM/
  20. 20 https://codepen.io/rrenula/pen/VMWMWx
  21. 21 https://codepen.io/rrenula/pen/VMWMWx
  22. 22 https://codepen.io/Trangbnguyen/pen/GMNQGN/
  23. 23 https://codepen.io/Trangbnguyen
  24. 24 https://codepen.io
  25. 25 https://sejikco.github.io/CssGridSheetMusic/
  26. 26 https://github.com/Sejikco/CssGridSheetMusic
  27. 27 https://github.com/Sejikco/CssGridSheetMusic
  28. 28 https://codepen.io/dannievinther/pen/EvVggR
  29. 29 https://codepen.io/dannievinther/pen/EvVggR
  30. 30 https://erikdson.github.io/smashing-grid-challenge/
  31. 31 https://erikdson.github.io/smashing-grid-challenge/
  32. 32 https://github.com/erikdson/smashing-grid-challenge
  33. 33 https://codepen.io/justincavery/pen/yaRLYE/
  34. 34 https://pulsardev.github.io/mendelable/
  35. 35 https://pulsardev.github.io/mendelable/
  36. 36 https://amydevoogd.github.io/product-showcase/
  37. 37 https://amydevoogd.github.io/product-showcase/
  38. 38 https://github.com/amydevoogd/product-showcase
  39. 39 https://www.swissted.com/products/the-cure-at-canterbury-odeon-1979
  40. 40 https://codepen.io/IevaOzolite/pen/xdaVJq
  41. 41 https://codepen.io/IevaOzolite/pen/xdaVJq
  42. 42 https://codepen.io/wing-zero/pen/MEvaBQ
  43. 43 https://codepen.io/wing-zero/pen/MEvaBQ
  44. 44 https://codepen.io/TanyaS/pen/OxWwew
  45. 45 https://codepen.io/TanyaS/pen/OxWwew
  46. 46 https://codepen.io/nelsonleite/full/aygNVv/
  47. 47 https://codepen.io/nelsonleite/full/aygNVv/
  48. 48 https://codepen.io/beginnr/full/brbKWX/
  49. 49 https://codepen.io/beginnr/full/brbKWX/
  50. 50 https://codepen.io/arturios/full/Evzzyx/
  51. 51 https://codepen.io/arturios/full/Evzzyx/
  52. 52 https://getpublii.com/themes/demo/starter/
  53. 53 https://getpublii.com/themes/demo/starter/
  54. 54 https://codepen.io/basherkev/pen/PjKQKM
  55. 55 https://codepen.io/basherkev/pen/PjKQKM
  56. 56 https://codepen.io/w3work/pen/PKvNKa
  57. 57 https://codepen.io/w3work/pen/PKvNKa
  58. 58 https://codepen.io/Smakosh/pen/BwQBpW
  59. 59 https://codepen.io/Smakosh/pen/BwQBpW
  60. 60 https://codepen.io/-J0hn-/full/xLvKLx
  61. 61 https://codepen.io/-J0hn-/full/xLvKLx
  62. 62 https://codepen.io/requestingmark/full/eGWprx/
  63. 63 https://codepen.io/requestingmark/full/eGWprx/
  64. 64 https://codepen.io/mdouglass/pen/aLwKKL
  65. 65 https://codepen.io/mdouglass/pen/aLwKKL
  66. 66 https://www.dropbox.com/s/qftfb4cvyvcdcwc/css_grid_layout.zip?dl=0
  67. 67 https://codepen.io/argo49/pen/jGbXBp?editors=1100
  68. 68 https://codepen.io/argo49/pen/jGbXBp?editors=1100
  69. 69 https://cerosetenta.uniandes.edu.co/
  70. 70 https://codepen.io/Mantish/full/Oxgbbq
  71. 71 https://codepen.io/Mantish/full/Oxgbbq
  72. 72 https://codepen.io/kathykato/pen/JrJwrY
  73. 73 https://codepen.io/kathykato/pen/JrJwrY
  74. 74 https://www.visualgui.com/
  75. 75 https://www.visualgui.com/
  76. 76 https://codepen.io/Anenth/full/wrKmNd/
  77. 77 https://codepen.io/Anenth/full/wrKmNd/
  78. 78 https://codepen.io/digilou/pen/wrwJGV
  79. 79 https://codepen.io/digilou/pen/wrwJGV
  80. 80 https://codepen.io/nurcin/pen/WZNbbq
  81. 81 https://codepen.io/nurcin/pen/WZNbbq
  82. 82 https://codepen.io/remyo/full/rGjZML/
  83. 83 https://codepen.io/remyo/full/rGjZML/
  84. 84 https://codepen.io/kalwas/pen/VMbNxz
  85. 85 https://codepen.io/kalwas/pen/VMbNxz
  86. 86 https://codepen.io/goiblas/pen/pWwRLa
  87. 87 https://codepen.io/goiblas/pen/pWwRLa
  88. 88 https://codepen.io/dododesign/pen/xXrJme
  89. 89 https://codepen.io/dododesign/pen/xXrJme
  90. 90 https://codepen.io/viiv3k/pen/eGEOqR
  91. 91 https://codepen.io/viiv3k/pen/eGEOqR
  92. 92 https://codepen.io/pranjalnadhaniUC/pen/MEpGMj
  93. 93 https://codepen.io/pranjalnadhaniUC/pen/MEpGMj
  94. 94 https://codepen.io/m_herrebaut/pen/pWdErd
  95. 95 https://codepen.io/m_herrebaut/pen/pWdErd
  96. 96 http://sicontis.tk/301-days/projects/css-grid-01/
  97. 97 http://sicontis.tk/301-days/projects/css-grid-01/
  98. 98 https://www.dropbox.com/s/aiixb5gk9su4gbo/CSS%20GRID.zip?dl=0
  99. 99 https://www.dropbox.com/s/aiixb5gk9su4gbo/CSS%20GRID.zip?dl=0
  100. 100 https://jonathan-harrell.com/experiment/contextual-callouts-with-css-grid/
  101. 101 https://jonathan-harrell.com/experiment/contextual-callouts-with-css-grid/
  102. 102 https://amydevoogd.github.io/product-showcase/
  103. 103 https://codepen.io/Anenth/full/wrKmNd/
  104. 104 https://codepen.io/argo49/pen/jGbXBp?editors=1100
  105. 105 https://codepen.io/arturios/full/Evzzyx/
  106. 106 https://www.dropbox.com/s/aiixb5gk9su4gbo/CSS%20GRID.zip?dl=0
  107. 107 https://codepen.io/basherkev/pen/PjKQKM
  108. 108 https://getpublii.com/themes/demo/starter/
  109. 109 https://codepen.io/digilou/pen/wrwJGV
  110. 110 https://codepen.io/dannievinther/pen/EvVggR
  111. 111 https://www.visualgui.com/
  112. 112 https://codepen.io/dododesign/pen/xXrJme
  113. 113 https://erikdson.github.io/smashing-grid-challenge/
  114. 114 https://codepen.io/wing-zero/pen/MEvaBQ
  115. 115 https://jonathan-harrell.com/experiment/contextual-callouts-with-css-grid/
  116. 116 https://codepen.io/IevaOzolite/pen/xdaVJq
  117. 117 https://codepen.io/Smakosh/pen/BwQBpW
  118. 118 https://codepen.io/goiblas/pen/pWwRLa
  119. 119 https://codepen.io/-J0hn-/full/xLvKLx
  120. 120 https://codepen.io/kathykato/pen/JrJwrY
  121. 121 https://codepen.io/mdouglass/pen/aLwKKL
  122. 122 https://codepen.io/digilou/pen/wrwJGV
  123. 123 https://codepen.io/Mantish/full/Oxgbbq
  124. 124 https://www.dropbox.com/s/qftfb4cvyvcdcwc/css_grid_layout.zip?dl=0
  125. 125 https://codepen.io/beginnr/full/brbKWX/
  126. 126 https://codepen.io/nelsonleite/full/aygNVv/
  127. 127 https://codepen.io/kalwas/pen/VMbNxz
  128. 128 https://codepen.io/pranjalnadhaniUC/pen/MEpGMj
  129. 129 https://pulsardev.github.io/mendelable/
  130. 130 https://codepen.io/nurcin/pen/WZNbbq
  131. 131 https://codepen.io/remyo/full/rGjZML/
  132. 132 https://codepen.io/rrenula/pen/LzLXYJ
  133. 133 https://codepen.io/requestingmark/full/eGWprx/
  134. 134 https://codepen.io/w3work/pen/PKvNKa
  135. 135 https://codepen.io/samdbeckham/pen/Naxxgy?editors=1100
  136. 136 https://github.com/Sejikco/CssGridSheetMusic
  137. 137 https://codepen.io/TanyaS/pen/OxWwew
  138. 138 http://sicontis.tk/301-days/projects/css-grid-01/
  139. 139 https://codepen.io/Trangbnguyen/pen/GMNQGN/
  140. 140 https://codepen.io/viiv3k/pen/eGEOqR
  141. 141 https://twitter.com/smashingmag

↑ Back to top

Tweet itShare on Facebook

Article source: https://www.smashingmagazine.com/2017/10/css-grid-challenge-2017-winners/

Tags:


Submit a Review




If you want a picture to show with your review, go get a Gravatar.

1&1 has shared hosting and dedicated hosting solutions for every budget and free domains with all hosting packages!  StartLogic - Affordable hosting: Free setup/domain, unlimited emails, PHP, mySQL, CGI, FrontPage. As low as $3.95/month
Cloud ecommerce platform delivers more traffic, higher conversion and unmatched performance

© Copyright 2008 Tyconia International, Inc. All Rights Reserved.