Search code examples
cssbourbonneat

How to make element break out of grid and touch edge of browser

Please refer to the image below. I have a grid set up (using Bourbon Neat). The first pink element fits normally over 5 columns, but the green element needs to start on the 6th column but ends breaking out of the grid and touching the edge of the browser. I'm fairly sure that this isn't possible without using javascript, but hopefully I can be proved wrong!

Any ideas how to accomplish this?

EDIT: This needs to work with max-width on the outer-container!

enter image description here

Example HTML:

<div class="container">
 <div class="pink"></div>
 <div class="green"></div>
</div>

Bourbon:

.container{
  @include outer-container();
}
.pink{
  @include span-columns(5);
}
.green{
  @include span-columns(7);
  // What to do here???
}
Solution

  • I have a solution. It's not the prettiest, but I do think it generally honors the Neat system. On CodePen: https://codepen.io/alexbea/pen/LRxXpO.

    The pink and green (purple and teal in my example) end up being wrapped in their own containers, which do the work of aligning to the grid. The second column breaks out by using a negative right margin equal to the padding. Using vw for the padding allows for simple consistency in this case. You might need to adjust the value there for your case.

    HTML

    <div class="container">
 <div class="first"><div class="pink"></div></div>
 <div class="second"><div class="green"></div></div>
</div>

    SCSS

    .container {
  @include outer-container(100%);
  @include pad(2vw);
}

.first { @include span-columns(5); }
.second { @include span-columns(7); }

.pink,
.green { height: 100px; }

.pink { background-color: pink;}
.green {
  background-color: green;
  margin-right: -2vw;
}