Search code examples
jekyllbourbonneat

Bourbon Neat -- grid behavior

I am using Bourbon Neat grid to size the widths of various divs on a web page.

default.html

<main class = "default-content">
    {{ content }}
</main>

default.scss

main {
    @include span-columns(6);
}

page.html

The content of this page will be pipelined to {{ content }} in default.html

<div class = "full-width">
</div>

page.scss

.full-width {
    @include span-columns(6);
    border: 1px solid #111;
}

Expected and Desired Results

The width of <div class="full-width"> will be the full width of the parent div.

Actual Results

The width of <div class="full-width"> is only half the width of the parent div.

Conclusion

It was my impression that the child div would be the full width of the parent div since they are both @include span-columns(6). My guess is that this is not the actual result because

  • These divs are not within an @include outer-container
  • There is something in the syntax of Bourbon Neat I am missing
  • Something with the pipelining of the content is messing with the grid

Also, if you know ... is the use of @include outer-container necessary?

Solution

  • From Neat documentation

    Specifies the number of columns an element should span. If the selector is nested the number of columns of its parent element should be passed as an argument as well.

    If your $grid-columns variable is 12, in your .full-width expression, span is assumed to me 6 columns over 12 (half the size of the parent).

    Correct expression is :

     .full-width {
    @include span-columns(6 of 6);
    border: 1px solid #111;
 }