CODEWITHSUNDEEP
css
user3574603
user3574603

Reputation: 3618

SASS/Bourbon/Neat: How can I add margins outside grid?

I am using Neat's 12 column grid. The page is made up of sections that stretch the full width of the grid. The section background differs from the page background:

Screen capture of layout using Neat grid

As you can see, the left hand side of the pink section is flush with the edge of the grid. What I would like is for the left side of the section to overhang the grid by a couple of rems.

However, if I add a margin, the section resizes so that it fits inside the grid.

This is Neat's mixin:

@mixin outer-container($local-max-width: $max-width) {
  @include clearfix;
  max-width: $local-max-width;
  margin: {
    left: auto;
    right: auto;
  }
}

This is my style:

.page-section {
    @include outer-container;
    @include span-columns(6);
    background: tint(red, 80%);
}

It gives me the correct overhang on the left side but not on the right. No matter whether I use negative margins or padding, I cannot make the right side overhang.

.page-section {
    @include outer-container;
    margin-left: -2rem;
    padding-left: 2rem;
    margin-right: -16em;
    background: tint(red, 80%);
}

enter image description here

Is there a correct way to force the left and right edges outside of the grid? Any help would be welcome!

Upvotes: 1

Views: 135

Answers (1)

user3574603
user3574603

Reputation: 3618

Solved it. Using calc() and ditching the outer-container() mixin did the trick.

.page-section {
    background: tint(blue, 80%);
    @include span-columns(12);
    width: calc(100% + 8rem);
    margin-left: -4rem;
    padding: 4rem;
}

Results in:

enter image description here

Upvotes: 1

Related Questions