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. ryandolankayak
    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. marinade
    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

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.