Search code examples
gridbourbonneatmargin

Position child element outside its context in Bourbon Neat


I'm trying to change the context of an html children element.

<div class="outer-container">
   <div class="main-content">
     <img class="chid-element" />
   </div>
</div>

The main-contentelement is 6 columns wide and is shifted by 2. I would like its children <img>to span from the .outer container's second column to its 11th.

My layout

Any idea? Thanks.


Solution

  • On chid-element you need to use @include span-columns(10 of 8) and @include shift(-1)

    http://codepen.io/anon/pen/LpQZgy