Menu icon Foundation
SASS Grid Confusion

I'm using Foundation 6 Sites SASS to style grids and confused about the CSS compiled based on the rules I've written. Here's an example:

 

.inner {

  @include grid-col(10);

  @media screen and (min-width: 640px) { @include grid-column(6,0); }

  ... styles ..

}

My expectation, based on the documentation, is that:

  • Below 640px, .inner is ten columns wide, and includes gutter padding
  • Above the breakpoint, .inner is 6 columns wide, and has no gutter padding

The compiled CSS includes gutter padding above the 640px breakpoint, however. Why?

Foundation Gridgrid sass

I'm using Foundation 6 Sites SASS to style grids and confused about the CSS compiled based on the rules I've written. Here's an example:

 

.inner {

  @include grid-col(10);

  @media screen and (min-width: 640px) { @include grid-column(6,0); }

  ... styles ..

}

My expectation, based on the documentation, is that:

  • Below 640px, .inner is ten columns wide, and includes gutter padding
  • Above the breakpoint, .inner is 6 columns wide, and has no gutter padding

The compiled CSS includes gutter padding above the 640px breakpoint, however. Why?