---
title: Generating a responsive CSS grid using Neat
date: '2016-07-24'
draft: false
tags: ['development', 'css', 'sass']
---

I use a responsive grid system for this site (and a number of other projects) that's generated by pulling in Thoughtbot's [Neat](http://neat.bourbon.io/) framework.<!-- excerpt --> To generate the framework for this grid, I've put together a simple SASS/SCSS mixin that looks like the following:"

```scss
.grid {
    &-main-container {
        @include outer-container;
    }

    &-row {
        @include row;
        @include pad(0 10%);

        @media only screen and (max-width: 640px) {
            @include pad(0 10%);
        }

        &.collapse {
            @media only screen and (max-width: 640px) {
                @include pad(0);
            }
        }

        .grid-row {
            // collapse nested grid rows
            @include pad(0);
        }
    }

    $grid-columns: 12;

    @for $i from 0 through $grid-columns {
        &-columns-#{$i} {
            @include span-columns($i);
        }

        &-columns-small-#{$i} {
            @include span-columns($i);

            @media only screen and (max-width: 640px) {
                @include span-columns(12);
            }
        }
    }
    @for $i from 0 through $grid-columns {
        &-shift-left-#{$i} {
            @include shift(-$i);
        }

        &-shift-right-#{$i} {
            @include shift($i);
        }

        @media only screen and (max-width: 640px) {
            &-shift-left-#{$i},
            &-shift-right-#{$i} {
                @include shift(0);
            }
        }
    }
}
```

To use the grid, simply drop it in as an import after including Neat. Once your SASS/SCSS files have been parsed, you'll end up with completed grid classes that will allow you to generate responsive markup for a page. For example:

```html
<div class="grid-main-container">
        <div class="grid-row>
                <div class="grid-columns-9">
                <!-- Content -->
                </div>
                <div class="grid-columns-3">
                <!-- Content -->
                </div>
        </div>
        <!-- Columns in this row will collapse to the full screen width on small screens -->
        <div class="grid-row>
                <div class="grid-columns-small-9">
                <!-- Content -->
                </div>
                <div class="grid-columns-small-3">
                <!-- Content -->
                </div>
        </div>
</div>
```