Fundación SASS - css, sass, zurb-foundation

Estoy probando el nuevo marco de Foundation 6,usando SASS, pero estoy luchando por entender el sistema de grillas. De acuerdo con la documentación y otro ejemplo que he visto, lo que he hecho debe ser una cuadrícula simple de 2,1:

    @import "foundation";

/* CUSTOM STYLES */

.container {
@include grid-row(3);
main {
background: $primary-color;
@include grid-column(2);
}
aside {
background: $primary-color;
@include grid-column(1);
}
}

Por alguna razón, resulta en esto:

Problema de cuadrícula

Respuestas

Puedes arreglar esto de dos maneras. El primero es al incluir foundation-global-styles en tu principal app.scss archivo. Aquí hay un ejemplo app.scss archivo:

@charset "utf-8";

@import "settings";
@import "foundation";

@include foundation-global-styles;

Si no desea incluir todos los estilos globales de Foundation, la regla CSS específica que soluciona este problema es:

*,
*:before,
*:after {
box-sizing: border-box;
}

Esta regla hace que todos los elementos incluyan tamaños de relleno y borde en los cálculos de ancho y alto. Probablemente te encuentres con menos obstáculos en el camino si incluyes Foundation's s Estilos globales ya que son en su mayoría un conjunto de restablecimientos para mejorar la coherencia entre los navegadores.

Nota: Eliminé mi otra respuesta ya que esta respuesta identifica el CSS que es la raíz del problema.

utilizar requiere "zurb-foundation" en ruby.config

referir http://foundation.zurb.com/sites/docs/sass-functions.html http://foundation.zurb.com/sites/docs/sass-mixins.html