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.
Responsive 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.
gorgeous
Excellent………..I fall in love with CSS Grid
Super helpful. Thanks!
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)
*”…and very _few_ complicated ones.” (stupid typing faster than I can think)
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.
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).
I am very interested in CSS Grid as well, and see that you’re using it. Have you found any troubles with browser incompatibility? Because we’re still in transition between the OLD way (Flexbox/bootstrap) and the NEW way (CSS Grid all the way, baby!) I’ve been hesitant to use it due to browser difficulties (and especially mobile browser adoption).
How have your experiences been?
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
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
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:
Am I just stupid or could you not just use a combination of min(), max() and clamp() to set limits on your font-sizes?
You totally can! This post was originally written before those functions were widely supported. There’s much more on how that works in this post.
Useful. Thanks for the layouts Mr. Graham.
Thanks for the article and templates. CSS Grid is becoming my goto for almost all my projects.
Very helpful, thanks!
I am also curious where I can find more info on the calculations you created for responsive font-size? :)
Hey Stephanie! So glad these starter templates have been helpful. :)
Here’s a full write-up on the fluid typography used in these demos:
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)
Of course, add away! Take anything you find useful. :)
Your breakout has a rule for a fogure element but I don’t see it in the markup… Typo?
That is indeed a bonafide typo. Thanks for the heads up!
This is awesome.
Very good. But I have a question: Why not just use a simple table to create a calendar?
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. :)
Awesome stuff! Thanks Geoff :)
I´m a web developer in training(almost done).
I started to try grid yesterday morning, by they end of the day I only used grid. Much easier and more intuitive. I´m primarily going to use grid, because of you and one other site.
I started to use grid but i can’t seem to find out how to do a full width background color to a fixed layout.
Hmm, not sure what might be going on there. Do you have a demo? A full background color should be possible with any layout, regardless of whether it is fixed or not: https://codepen.io/geoffgraham/pen/PRxEEd
This is a very useful article for beginners like me.
Thanks Geoff Graham
Nice compilation. Thanks!
Calander is beautiful.
Thank You so much!
Hi Geoff! I have been struggling with the grid over the last week. I have been observing the monthly mixup grid layout very closely but couldn’t figure out how you keep the relation between the row height and column width (or is it that you use breakpoints?). I mean I know that you certainly HAVE set some breakpoints but there’s still something professional I don’t understand. Can you help me please? I want something nice like yours in my website. Thanks!!
Hey Luke! I wish I could take credit for the Monthly Mixup layout but that’s all Chris. :)
Looks like it starts becoming a grid at the 800px breakpoint, which is set on the parent element. It’s actually set up as a six-column grid (
grid-template-columns: repeat(6, 1fr);) and then all the children are placed along the columns (e.g.grid-column: 1 / 2for the first grid column) and on the implicit rows that grid creates (e.g.grid-column: 2 / 3for the second row).That way, there’s no real need for breakpoints! The grid handles the spacing and placement from a breakpoint of 800px and up.
What you have written here Geoff Graham is ABSOLUTELY PRICELESS. I cannot believe how this article is just existing for free here! It is SO valuable! It’s like a dream come true for the perfectionist Jr. Developer types… like me. Anyway, I just wanted to THANK YOU from the bottom of my heart for crafting this beauty here. ♥️
you can use :first-letter pseudo element to style responsive calendar, while keeping the title=”Sunday” so on mouse over you see the whole calendar day.
ul.weekdays li abbr:first-letter {
font-size:calc(16px + (26 – 16) * ((100vw – 300px) / (1600 – 300)));
}
Clever!
Thanks. Used this in my website which is hosted on digitalocean also.