Layout Breakouts Builder

An interactive CSS generator for the popular CSS Grid page layouts pattern, Layout Breakouts.

Created by Andrew Walpole

Layout Breakouts is a pattern coined by Ryan Mulligan. The idea was then expanded-upon by Kevin Powell in a video where he showed a trick to allow the concept to cascade down markup by nesting the full-width grid into itself, making this pattern useful and robust for setting the main page layout system on production websites.

While the concept is very useful once set, the setup is non-trivial, requiring a decent bit of CSS math. So I have built this generator to make it easier to configure the pattern for quick use.