Nesting grids with Neat 2

Neat 2 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, 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.

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.

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.

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

Visit our Open Source page to learn more about our team’s contributions.