--- title: Nesting grids with Neat 2 teaser: 'Use Neat 2 to create dyamic nested layouts for your site or app. ' tags: neat,bourbon,design,sass,open source,web author: Will H McMahan published_on: 2017-08-08 --- ![Neat – Illustration of 2 birds playing with the neat logo](https://images.thoughtbot.com/blog-vellum-image-uploads/2xPwqDfTTcK5IyDua4zL_neat-nested-columns-illu2.png) [Neat 2](https://neat.bourbon.io) introduces a lot of new interesting features and functionality, and also reworks a few key principles. One of these features is the ability to create nested grids. Nested grids are common for creating complex layouts and dynamic designs. They are also pivotal when creating components that live inside large layout structures. Here's how to think about and create nested grid structures in Neat 2. Since Neat uses a [push left grid system](https://thoughtbot.com/blog/building-the-future-of-floated-css-grids#the-push-left-grid), gutters are defined with margin, not padding, on each of the grid objects. Here's an example of three simple columns in a great container. Each column is defined using `grid-column(4)` which, given the default of 12 columns, means that there are 3 columns per row.

See the Pen Neat Blog post 3 example 1 by Will H McMahan (@whmii) on CodePen.

If we just nest additional columns inside one of the existing ones, we end up with double margins. This doesn't break the layout, but it is often not the desired behavior.

See the Pen Neat Blog post 3 example 2 by Will H McMahan (@whmii) on CodePen.

The best way to resolve this situation is to use the `grid-collapse()` mixin. This object is an extra element added within the parent column, wrapping the three children columns. Taking the global gutter into account, this element will "eat" the margin on either side of it, allowing the children elements to then push back in, reestablishing the gutter. Its also common to add `grid- container()` to this element, since it has floated children and will collapse unless a clearfix is added.

See the Pen Neat Blog post 3 example 3 by Will H McMahan (@whmii) on CodePen.

That's it! If you're into multiple levels of nesting, you can continue to nest columns over and over again by adding a `grid-collapse()` element each time to wrap your columns. While this system does require you to add extra HTML elements, the end result creates super stable layouts that look great across any device. Nest away, you maverick 🚀! Sincerely yours,
[Will H McMahan](https://twitter.com/WHMII)

A time-lapse illustration of 2 birds playing with the Neat logo

Visit our [Open Source page](https://thoughtbot.com/open-source) to learn more about our team's contributions.