Continuing the concept of "Don't Overthink It Grids", we get gutters going on in the grid by just using some simple padding. We keep the padding number consistant by reusing our global $padding variable. You'll find that we use that number a ton as we do our styling.

We style up the "module" class with a simple background and box-shadow. This is a very re-usable class that can be used anywhere.

The end result is a lovely flexible grid which only took a few lines of code. It might get a little bit more complex as we move on, but not too much.


  1. User Avatar
    Permalink to comment#

    I am following your grid structure but for some reason when i apply padding-right to the class*=’grid’ nothing happens?

  2. User Avatar
    Permalink to comment#

    Was it an issue with compass cache ryan? I had issues with previous videos and found a solution
    adding this to the config.rb file

                               <pre><code># disable asset cache buster
                                          asset_cache_buster do |http_path, real_path|

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.