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.
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
Visit our Open Source page to learn more about our team’s contributions.
