0
votes

I'm trying out the new Foundation 6 framework, using SASS, but I'm struggling to understand the grid system. Based on the documentation and other example I've seen what I've done should be a simple 2,1 grid:

    @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);
    }
}

For some reason it results in this:

Grid problem

Grid problem

2
Can you post the html source as well? - JAMESSTONEco

2 Answers

0
votes

You can fix this two ways. The first is by including foundation-global-styles in your main app.scss file. Here's an example app.scss file:

@charset 'utf-8';

@import 'settings';
@import 'foundation';

@include foundation-global-styles;

If you don't want to include all of Foundation's global styles, the specific CSS rule that fixes this issue is:

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

This rule makes all elements include padding and border sizes in width and height calculations. You'll probably run into less obstacles down the road if you include Foundation's Global Styles since they are mostly a bunch of resets for improving consistency across browsers.


Note: I deleted my other answer as this answer pinpoints the CSS that is the root of the problem.