CSS Grid Starter Layouts

Avatar of Geoff Graham
Geoff Graham on (Updated on )

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.