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.
Things get stacked up once the viewport gets narrow.
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.
Elements flow into the layout and end when there are no more.
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.