CSS Grid-The Holy Grail Template

CSS Grid-The Holy Grail Template

See the Pen CSS Grid – Holy Grail (of) Layout – COMPLETE by Steven Roberts (@matchboxhero) on CodePen.


  • Steven Roberts
  • February 1, 2017

Made with


About the Code

CSS Grid – Holy Grail (of) Layout – COMPLETE

The idea here is to build the holy grail layout in Grid, but obviously it needs to be responsive. Incase you don’t know the holy grail layout is a header, a left sidebar, content and right sidebar and then a footer. The code to accomplish this complex layout is pretty short and really easy to follow and understand, the syntax and new properties in Grid are not only simple but somehow elegant.

More info: Link


Responsive: Yes

12+ years of solution-driven experience, excelling in highly collaborative work environment, finding solutions to challenges and focused on customer satisfaction. Proven experience developing user-friendly web/mobile applications. Experience in applying DevOps automation integrating with Cloud solutions, following Agile principles.