#### Dannie VintherA 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](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/374e6bf328.png?resize=727.5%2C389&ssl=1)
#### 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](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/ff7622b0b5.png?resize=727.5%2C396&ssl=1)
#### MathieuInspired 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](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/12dcc1fcf0.png?resize=727.5%2C404&ssl=1)
#### Amy DeVoogdInspired 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](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/49d4b564ab.jpeg?resize=500%2C567&ssl=1)
#### Ieva OzolīteA 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](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/e0a99d8e19.png?resize=727.5%2C487&ssl=1)
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](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/e8677d7a3e.png?resize=727.5%2C378&ssl=1)
Tanya Syrygina
Tanya Syrygina used Grid to built a fresh, card-style blog layout.
![CSS Grid by Tanya Syrygina](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/e090f4ccaa.png?resize=727.5%2C420&ssl=1)
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](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/ba238a08eb.png?resize=727.5%2C441&ssl=1)
Robert Mion
Robert Mion combined CSS Grid and Flexbox to build a responsive supermarket add.
![CSS Grid by Robert Mion](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/411707f674.png?resize=727.5%2C512&ssl=1)
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](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/612e03ba78.png?resize=727.5%2C412&ssl=1)
Bob Mitro
A simple, responsive blog theme based on CSS Grid layout.
![CSS Grid by Bob Mitro](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/016fd2713e.png?resize=727.5%2C516&ssl=1)
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](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/8ea1aca9c4.png?resize=727.5%2C432&ssl=1)
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](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/0e3cc16252.png?resize=727.5%2C323&ssl=1)
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](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/409183e818.png?resize=727.5%2C432&ssl=1)
Juan Garcia
A page of a video game platform comes from Juan Garcia.
![CSS Grid by Juan Garcia](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/57995cd6eb.png?resize=727.5%2C477&ssl=1)
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](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/7a57e68478.png?resize=727.5%2C456&ssl=1)
Marissa Douglass
Ever thought of building an interactive cookbook with CSS Grid? Marissa Douglass did.
![CSS Grid by Marissa Douglass](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/7e9d2384ae.png?resize=727.5%2C399&ssl=1)
Melissa Bogemanns
A photo showcase made with CSS Grid. Available as .zip (6MB)
![CSS Grid by Melissa Bogemanns](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/197ea89637.png?resize=727.5%2C442&ssl=1)
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](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/465d8ef9bf.png?resize=727.5%2C391&ssl=1)
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](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/cbba2a16a7.png?resize=727.5%2C413&ssl=1)
Katherine Kato
A portfolio website layout made with CSS Grid and Flexbox as a fallback.
![CSS Grid by Katherine Kato](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/781eff589b.png?resize=727.5%2C517&ssl=1)
Donny Truong
A minimalistic blog layout comes from Donny Truong.
![CSS Grid by Donny Truong](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/68216e8c49.png?resize=727.5%2C464&ssl=1)
Anenth Vishnu
A responsive app layout based on Grid.
![CSS Grid by Anenth Vishnu](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/7b0b3ffe29.png?resize=727.5%2C438&ssl=1)
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](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/e729264c81.png?resize=727.5%2C390&ssl=1)
Nurçin Özer
Nurçin Özer submitted a basic blog layout.
![CSS Grid by Nurçin Özer](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/924f2638c8.png?resize=727.5%2C486&ssl=1)
Remy Oleszczuk
Inspired by the BBC SPORT landing page.
![CSS Grid by Remy Oleszczuk](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/c47f1b762e.png?resize=727.5%2C409&ssl=1)
Patryk Kalwas
![CSS Grid by Patryk Kalwas](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/288fb0fdc2.png?resize=727.5%2C443&ssl=1)
Jesús Olazagoitia
![CSS Grid by Jesús Olazagoitia](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/8f1395af5f.png?resize=727.5%2C376&ssl=1)
Dóra Pölöskei
![CSS Grid by Dóra Pölöskei](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/39b9848a26.png?resize=727.5%2C377&ssl=1)
Vivek Singh
![CSS Grid by Vivek Singh](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/346d0a6b58.png?resize=727.5%2C366&ssl=1)
Pranjal Nadhani
![CSS Grid by Pranjal Nadhani](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/e8a935477b.png?resize=727.5%2C442&ssl=1)
Mathias Herrebaut
![CSS Grid by Mathias Herrebaut](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/5c4ac7c61a.png?resize=727.5%2C538&ssl=1)
Noel Tekiri
![CSS Grid by Noel Tekiri](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/5ef43c2909.png?resize=727.5%2C466&ssl=1)
Aurélie Deschacht
![CSS Grid by Aurélie Deschacht](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/01addd12af.png?resize=727.5%2C487&ssl=1)
Jonathan Harrell
![CSS Grid by Jonathan Harrell](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/ec396367d2.png?resize=727.5%2C441&ssl=1)
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](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/7e9d2384ae.png?resize=727.5%2C399&ssl=1)
Melissa Bogemanns
A photo showcase made with CSS Grid. Available as .zip (6MB)
![CSS Grid by Melissa Bogemanns](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/197ea89637.png?resize=727.5%2C442&ssl=1)
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](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/465d8ef9bf.png?resize=727.5%2C391&ssl=1)
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](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/cbba2a16a7.png?resize=727.5%2C413&ssl=1)
Katherine Kato
A portfolio website layout made with CSS Grid and Flexbox as a fallback.
![CSS Grid by Katherine Kato](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/781eff589b.png?resize=727.5%2C517&ssl=1)
Donny Truong
A minimalistic blog layout comes from Donny Truong.
![CSS Grid by Donny Truong](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/68216e8c49.png?resize=727.5%2C464&ssl=1)
Anenth Vishnu
A responsive app layout based on Grid.
![CSS Grid by Anenth Vishnu](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/7b0b3ffe29.png?resize=727.5%2C438&ssl=1)
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](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/e729264c81.png?resize=727.5%2C390&ssl=1)
Nurçin Özer
Nurçin Özer submitted a basic blog layout.
![CSS Grid by Nurçin Özer](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/924f2638c8.png?resize=727.5%2C486&ssl=1)
Remy Oleszczuk
Inspired by the BBC SPORT landing page.
![CSS Grid by Remy Oleszczuk](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/c47f1b762e.png?resize=727.5%2C409&ssl=1)
Patryk Kalwas
![CSS Grid by Patryk Kalwas](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/288fb0fdc2.png?resize=727.5%2C443&ssl=1)
Jesús Olazagoitia
![CSS Grid by Jesús Olazagoitia](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/8f1395af5f.png?resize=727.5%2C376&ssl=1)
Dóra Pölöskei
![CSS Grid by Dóra Pölöskei](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/39b9848a26.png?resize=727.5%2C377&ssl=1)
Vivek Singh
![CSS Grid by Vivek Singh](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/346d0a6b58.png?resize=727.5%2C366&ssl=1)
Pranjal Nadhani
![CSS Grid by Pranjal Nadhani](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/e8a935477b.png?resize=727.5%2C442&ssl=1)
Mathias Herrebaut
![CSS Grid by Mathias Herrebaut](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/5c4ac7c61a.png?resize=727.5%2C538&ssl=1)
Noel Tekiri
![CSS Grid by Noel Tekiri](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/5ef43c2909.png?resize=727.5%2C466&ssl=1)
Aurélie Deschacht
![CSS Grid by Aurélie Deschacht](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/01addd12af.png?resize=727.5%2C487&ssl=1)
Jonathan Harrell
![CSS Grid by Jonathan Harrell](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/ec396367d2.png?resize=727.5%2C441&ssl=1)
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
- 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
- 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
- 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
Inspiration
Finally, to get your ideas flowing, some inspiring CodePen experiments that illustrate the magic of CSS Grid:
![Responsive Magazine Layout](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/c6b630d17d.png?resize=727.5%2C433&ssl=1)
![Minimalistic CSS Grid Layout](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/9c31290354.png?resize=727.5%2C418&ssl=1)
![CSS Grid Layout and Comics](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/0fcbfba8e2.png?resize=727.5%2C435&ssl=1)
![Auto Hexagonal CSS Grid Layout](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/675e0282b8.png?resize=727.5%2C399&ssl=1)
![CSS Grid Layout with @support Flexbox Fallback](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/8dedcbcf49.png?resize=727.5%2C426&ssl=1)
![Image Areas in CSS Grid Layout](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/69f1eeabf7.png?resize=727.5%2C412&ssl=1)
![Mondrian Art in CSS Grid](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/145204442a.png?resize=727.5%2C417&ssl=1)
![CSS Grid Layout Slideshow](https://i0.wp.com/curtlong.com/wp-content/uploads/images/wppipes/2017-12/e935b88535.jpeg?resize=727.5%2C433&ssl=1)
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.