CSS Grid Starter Layouts

This is a collection of starter templates for layouts and patterns using CSS Grid. The idea here is to show off what the technique is capable of doing and provide a starting point that can be re-purposed for other projects.

Remember that browser support for Grid is good but requires fallbacks for legacy browsers. That means a straight up copy and paste of these may not be well suited for some use cases.

Holy Grail Layout

The ol' classic three-column layout where two sidebars and a container holding the body copy is sandwiched between a full-width header and footer.

Flexible Holy Grail

Everything stays intact as the viewport width changes using a fluid content container.

See the Pen CSS Grid - Holy Grail 2 by Geoff Graham (@geoffgraham) on CodePen.

Flexible Holy Grail

Things get stacked up once the viewport gets narrow.

See the Pen CSS Grid: Holy Grail Layout - Responsive by Geoff Graham (@geoffgraham) on CodePen.


2-Columns with Header and Footer

A classic blog layout where one column is for the post and the other for a sidebar.

Flexible 2-Columns

The layout gets squishy when the viewport becomes narrow but the layout stays in place.

See the Pen CSS Grid: Header, Footer with 2-Column (Flexible) by Geoff Graham (@geoffgraham) on CodePen.

Responsive 2-Columns

Things get stacked up on smaller screens.

See the Pen CSS Grid: Header, Footer with 2-Column (Responsive) by Geoff Graham (@geoffgraham) on CodePen.


Evenly Distributed, Fit as Needed

Elements flow into the layout and end when there are no more.

See the Pen CSS Grid Evenly Distributed, As Many As Needed by Geoff Graham (@geoffgraham) on CodePen.

Article with Breakout

A great little trick by Tyler Sticka that allows an element to break out of the grid. Rachel Andrew provides a thorough explanation about how named grid lines allow this to work.

See the Pen CSS Grid: Article with Breakout by Geoff Graham (@geoffgraham) on CodePen.


Basic Calendar

As you might expect, CSS Grid works well for a calendar grid.

See the Pen CSS Grid: Calendar by Geoff Graham (@geoffgraham) on CodePen.


Monopoly Board

A simple recreation of the game board. Jen Simmons has a sweet demo complete with Monpoly styles.

See the Pen CSS Grid: Monopoly Board by Geoff Graham (@geoffgraham) on CodePen.

Comments

  1. User Avatar
    dnvdk
    Permalink to comment#

    gorgeous

  2. User Avatar
    Shaon
    Permalink to comment#

    Excellent………..I fall in love with CSS Grid

  3. User Avatar
    Matt
    Permalink to comment#

    Super helpful. Thanks!

  4. User Avatar
    Vanderson
    Permalink to comment#

    This is absolutely brilliant. Thank you for this. I’ve been using grid for about 6 months now, but only in the most basic use cases and very complicated ones. These are great examples to demonstrate some of the more obscure, but incredibly useful features of grid.

    I have to admit, it took me a few month to get over my infatuation with flexbox to really warm up to grid, but it was worth it. (where grid replaces flexbox perfectly of course)

    • User Avatar
      Vanderson
      Permalink to comment#

      *”…and very _few_ complicated ones.” (stupid typing faster than I can think)

    • User Avatar
      Geoff Graham
      Permalink to comment#

      Heck yeah, thanks Vanderson! Glad you’re finding these useful and I love hearing that you’re warming up to Grid. It’s a real interesting and exciting time in CSS for sure.

      (where grid replaces flexbox perfectly of course)

      Yeah, that’s the rub. Flexbox is still fantastic for one-dimensional layouts (either column or row) and Grid is the bomb for anything two-dimensional (column and row).

  5. User Avatar
    Shaun Levett
    Permalink to comment#

    The thing that confuses me about all these example Grid layouts is that the rows are almost always set in physical amounts (px,vh etc), which doesn’t make sense to me, as the rows would obviously need to expand to fit content like a normal web page (I believe grid will not expand row height unless stated). I know you can easily remedy this and use ‘auto’ for the row size, but it’s not often used in these examples.

    It’s like fixed height boxes from the bad old days. Basically, practical examples would be better than fixed size ones :)

    I realise this is a small niggle though

    • User Avatar
      Vanderson
      Permalink to comment#

      I did some tinkering in the codepens and I suspect the heights are there so the examples look good and easy to read in this article in small spaces.

      I agree, I’d never* use a forced height on something like this. Especially with responsive design requirements would make a mess of that.

      *Of course there are always those edge use cases. :P

    • User Avatar
      Geoff Graham
      Permalink to comment#

      It’s like fixed height boxes from the bad old days. Basically, practical examples would be better than fixed size ones :)

      Oh yeah, for sure. Everything here is purely for the sake of example because otherwise there would be no content to display to illustrate the concepts.

      To reiterate the opening:

      The idea here is to show off what the technique is capable of doing and provide a starting point that can be re-purposed for other projects.

  6. User Avatar
    Kerry Webster
    Permalink to comment#

    Useful. Thanks for the layouts Mr. Graham.

  7. User Avatar
    Russell
    Permalink to comment#

    Thanks for the article and templates. CSS Grid is becoming my goto for almost all my projects.

  8. User Avatar
    Stephanie
    Permalink to comment#

    Very helpful, thanks!

    I am also curious where I can find more info on the calculations you created for responsive font-size? :)

    • User Avatar
      Geoff Graham
      Permalink to comment#

      Hey Stephanie! So glad these starter templates have been helpful. :)

      Here’s a full write-up on the fluid typography used in these demos:

      Fluid Typography

  9. User Avatar
    Jan
    Permalink to comment#

    This is awesome! Could I add these to my own homebrew collection of helpers/guide for my own use? (here for reference: http://janzheng.com/stylecoeur/styleguide.html)

    • User Avatar
      Geoff Graham
      Permalink to comment#

      Of course, add away! Take anything you find useful. :)

  10. User Avatar
    Drew Landgrave
    Permalink to comment#

    Your breakout has a rule for a fogure element but I don’t see it in the markup… Typo?

    • User Avatar
      Geoff Graham
      Permalink to comment#

      That is indeed a bonafide typo. Thanks for the heads up!

  11. User Avatar
    R.Rajendren
    Permalink to comment#

    This is awesome.

  12. User Avatar
    André
    Permalink to comment#

    Very good. But I have a question: Why not just use a simple table to create a calendar?

    • User Avatar
      Geoff Graham
      Permalink to comment#

      You most certainly could! There’s often multiple ways to accomplish the same thing and table is a legit way. But this is a collection of Grid examples, not tables. :)

  13. User Avatar
    Skibidibong
    Permalink to comment#

    Awesome stuff! Thanks Geoff :)

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag