-1

Adding padding to a simple susy layout seems to break the grid for me. Adding the padding to .item class breaks the otherwise functioning 12-column grid.

$susy: (
  columns: 12,
  gutters: 1/4,
  gutter-position: split
);
$grid-padding:1em;
.wrap {
  border: 1px solid red;

  .item{
    background: lightGrey;
    padding-bottom: 10px;
    padding: 10px; //<= THIS BREAKS THE GRID
  }
}

  .wrap {
    border: 1px solid red;
    @include container(900px);

  }

  .item {
    &.main{
      @include span(8 first);
    }
    &.side {
      @include span(4 last);
    }
  }
  .main:after {
    content: '';
    display: block;
    clear:both;
  }

Meister

The documentation kind of makes it seem as though padding can be specified as the third argument to the span mixin, but that isn't working for me either.

1252748
  • 14,597
  • 32
  • 109
  • 229
  • Just a tip, you're sass file needs editing. You've used wrong indentation which is misleading, you've repeated both `.wrap` selector and `border: 1px solid red` and you haven't really taken full advantage of nesting. – Adetoyese Kola-Balogun Nov 01 '16 at 06:25

1 Answers1

0

This is as simple as globally setting the box-sizing property with Susy's built in mixin:

@include global-box-sizing(border-box):

Or, optionally set it on only one span mixin

@include span(6 of 12 border-box)

Relevant Susy docs

Super relevant Susy quote:

We highly recommend using a global border-box setting, especially if you are using inside gutters of any kind.

1252748
  • 14,597
  • 32
  • 109
  • 229