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.
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.
Everything stays intact as the viewport width changes using a fluid content container.
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.
See the Pen CSS Grid: Header, Footer with 2-Column (Responsive) by Geoff Graham (@geoffgraham) on CodePen.
Elements flow into the layout and end when there are no more.
As you might expect, CSS Grid works well for a calendar grid.