Search code examples
sasscompass-sasssusy-compass

Can't get Susy based grid to align properly

I have been trying out the Susy plugin for Compass (SASS), but I noticed that it isn't working as intended for me.

I took the index.html and screen.scss from the official Susy tutorial, compiled the SCSS and put it up on my server. As you can see it looks just like it's supposed to (on all browsers I tested it on):

enter image description here

What I did next was the following:

  • Copy the <article> in the <div role="main"> and paste it six times
  • In screen.scss, change the column-span (div[role="main"] > article) accordingly: from @include columns(6,9); to @include columns(1,9);

But now those new elements don't align to the grid at all, they are off by a clearly visible space. I tested this in recent versions of FF, Safari and Chrome, and only FF seems to display it correctly. Screenshot is from Chrome:

enter image description here

I also uploaded the source for everyone to inspect here.

Is this a general problem with Susy that the grid isn't correct or am I doing something wrong? If the first, does anybody know a workaround? I also tried with percentages and pixels, but neither worked.

Solution

  • Susy isn't just another grid system like all the others. It was designed to fulfill a very specific purpose: grids that are fluid on the inside. The units you use to create the grid are applied to the container, not to each column. Everything inside is built with percentages. What you are seeing is normal. It's true of all fluid grids, because of sub-pixel rounding. It's not a bug, it's a part of building responsive web sites.

    If you need pixel-exact grids, Susy is the wrong tool for you. It all depends what you are trying to build.

    Re-size your browser to see how it works. You'll notice the grids snapping-to and floating within a few pixels of their guides, but the grid stays intact and never triggers the horizontal scroll-bar.

    Cheers!

    -e