Search code examples
cssgridsassbourbonneat

Automatic rows not working in Bourbon Neat

I've tried using Bourbon Neat to setup some automatic rows but they aren't working.

Below is the code I have in my stylesheet file that is supposed to be sorting out the grid:

@import "bourbon";
@import "grid-settings";
$visual-grid: true;
@import "neat";

section {
  @include outer-container;

  .service-connection-img {
    @include span-columns(3);
    @include omega(4n);
    width: 150px;
    height: 150px;
    border-radius: 10px;
  }
}

Then in the HAML file I have this:

= stylesheet_link_tag "connections"

%section{class:"connections"}

  / = link_to "Twitter", user_omniauth_authorize_path(:twitter)
  %a{href:"/users/auth/twitter"}
    = image_tag "twitter250.png", class: "service-connection-img"

  %a{href:"https://github.com/login/oauth/authorize?client_id=ff7013fc7d06261543d7&scope=repo&state=bubble"}
    = image_tag "github250.png", class: "service-connection-img"

  %a{href:"/users/auth/evernote"}
    = image_tag "evernote250.png", class: "service-connection-img"

  %a{href:"/users/auth/instagram"}
    = image_tag "instagram250.png", class: "service-connection-img"

  %a{href:"/auth/wunderlist"}
    = image_tag "wunderlist250.png", class: "service-connection-img"

  %a{href:"/users/auth/instapaper"}
    = image_tag "instapaper250.png", class: "service-connection-img"

  %a{href:"/users/auth/fitbit"}
    = image_tag "fitbit250.png", class: "service-connection-img"

  %a{href:"/users/auth/pocket"}
    = image_tag "pocket250.png", class: "service-connection-img"

  %a{href:"/users/auth/facebook"}
    = image_tag "facebook250.png", class: "service-connection-img"

  %a{href:"/users/auth/lastfm"}
    = image_tag "lastfm250.png", class: "service-connection-img"

  %a{href:"/auth/rescue_time"}
    = image_tag "rescuetime250.png", class: "service-connection-img"

  %a{href:"/auth/whatpulse"}
    = image_tag "whatpulse250.png", class: "service-connection-img"

This results in the following:

https://i.sstatic.net/bg9OV.png

Where you can't see the rest of the images but there are 12 of them.

What I'm trying to get is 3 rows each containing 4 images.

Any ideas on what I'm doing wrong?

Solution

  • You are overriding the width property necessary for the grid to be properly set up.

      .service-connection-img {
    @include span-columns(3);
    @include omega(4n);
    // --> width: 150px;
    height: 150px;
    border-radius: 10px;
  }

    To get the result you want, you should create containers with the same span-columns and omega values, then inside of each have a 150x150 centered image.

      .service-connection-container {
    @include span-columns(3);
    @include omega(4n);
    border-radius: 10px;
    text-align: center;

    img {
      @include size(150);
      max-width: 100%;
      margin: auto;
    }
  }