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.
Responsive Holy Grail
Things get stacked up once the viewport gets narrow.
2-Columns with Header and Footer
A classic blog layout where one column is for the post and the other for a sidebar.
The layout gets squishy when the viewport becomes narrow but the layout stays in place.
Things get stacked up on smaller screens.
Evenly Distributed, Fit as Needed
Elements flow into the layout and end when there are no more.
Article with Breakout
As you might expect, CSS Grid works well for a calendar grid.
A simple recreation of the game board. Jen Simmons has a sweet demo complete with Monpoly styles.