Nth Grid allows you to create horizontal and vertical grid layouts using only 2 simple to use mixins.

You are free to use your own markup, and there are no negative margins, .last classes etc. We use the power of the :nth-child selector to create beautiful, semantic grids without any of the common layout hacks.

• Flexbox powered
• Semantic markup
• Horizontal and vertical layouts
• Fluid unit support (similar to using fr units in CSS grid)
• Mixed unit grids (eg pixel and fluid units in the same grid)
• Shrinking (auto width/height) cells
• And much more...

Nth Grid comes with just 2 mixins: grid() and grid-layout(). Also included is repeat() - a function for creating repeating patterns. The syntax is the same as the CSS Grid function.

Lets start off with a simple 3 column blog layout using the following markup:

<div class="page">
    <div class="sidebar-left"></div>
    <div class="content"></div>
    <div class="sidebar-right"></div>
</div>

Firstly we apply our base flexbox properties to the container:

.page {
    @include grid(row, wrap);
}

Notice we set the grid to the row direction (so our grid is horizontal) and wrap (so the grid can wrap if needed). Note these are the default values for the mixin.

Now we have the base properties we need to specify the column widths. Again we apply this directly to the parent container like so:

.page {
    @include grid(row, wrap);
    @include grid-layout(200px 2 1, 1rem);
}

The above code sets column 1 to 200px and column 2 to twice the size of column 3. Also included is a 1rem gutter between each column.

grid-layout() supports a single value, a list of values or a map. A single value, eg grid-layout(3, 1rem) will output 3 equal columns with a 1rem gutter.