Remove margin on span columns with Bourbon Neat

Question

I'm starting to use Thoughtbot's Bourbon Neat for responsive grids. Overall, it's pretty slick and I really like it, but I'm hung up on one little issue.

I'm trying to get two columns to butt up next to each other without the margins, but after trying to replicate what they have from their examples, I'm not getting the same result.

Here's the sample HTML:

<section>
    <p>
        This is the main section.
    </p>

    <div class="container">
        <p>
            This is the container
        </p>

        <div class="col1">
            <p>
                This is the 1st column.
            </p>
        </div>

        <div class="col2">
            <p>
                This is the 2nd column.
            </p>
        </div>

    </div>
</section>

Here's my SCSS:

section {
@include outer-container;
text-align: center;
}

.container {
@include span-columns (12);
text-align: center;
margin: 0;
padding: 0;


.col1 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
}
.col2 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
 }

}

Which produces this:

But when I try to get the two columns to nest/butt up to each other using the table method as their example shows, I get this:

SCSS:

section {
@include outer-container;
text-align: center;
}

.container {
@include span-columns (12);
@include row (table);
text-align: center;
margin: 0;
padding: 0;


.col1 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
}
.col2 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
    @include reset-display;
 }

}

Output:

If I go the @include omega(); route that works, but then it doesn't expand the full width of the last column:

SCSS:

section {
@include outer-container;
text-align: center;
}

.container {
@include span-columns (12);
text-align: center;
margin: 0;
padding: 0;


.col1 {
    @include span-columns(6);
    @include omega();
    background: #ccc;
    @include pad(em(15));
}
.col2 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
    @include omega();
 }

}

Output:

Essentially, I could just omit the content that is in the container section which does some what yield the result that I am looking for. But is that necessary to create an empty div in order to achieve that?:

SCSS

section {
@include outer-container;
text-align: center;
}

.container {
@include span-columns (12);
@include row(table);
text-align: center;
margin: 0;
padding: 0;


.col1 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
}
.col2 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
    @include reset-display
 }

}

HTML (content in the .container is commented out):

<section>
    <p>
        This is the main section.
    </p>

    <div class="container">
        <!-- <p>
            This is the container
        </p> -->

        <div class="col1">
            <p>
                This is the 1st column.
            </p>
        </div>

        <div class="col2">
            <p>
                This is the 2nd column.
            </p>
        </div>

    </div>
</section>

Output:

Anyways, I don't know what's the "proper" way of achieving this. The documentation isn't really specific for explaining how to go about getting two columns to nest up against each other. And from what I tried to replicate in their example didn't yield the same result.

Unless I need to specifically add a margin:0; on the last column.

Answer 1

Didn't you simply misplace your p with content "This is the container", so that it accidentally is used a a table-cell but you actually want it to be above the container?

Placing it above .container and it works:

<section>
  <p>
    This is the main section.
  </p>
  <p>
    This is the container
  </p>
  <div class="container">
    <div class="col1">
      <p>
        This is the 1st column.
      </p>
    </div>

    <div class="col2">
      <p>
        This is the 2nd column.
      </p>
    </div>

  </div>
</section>

Scss:

section {
  @include outer-container;
  text-align: center;
}

.container {
  @include fill-parent;
  @include row(table);

  .col1 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
  }
  .col2 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
  }
}

Output:

Answer 2

You can set the span-columns() for each container for a bit less than half the grid each, then shift the remaining value you took from each container and shift() each container away from the left/right sides like so:

html:

<div id="wrapper">
    <div id="1"></div>
    <div id="2"></div>
</div>

sass/sccs:

#wrapper
{
    #1
    {
        @include span-columns(5);
        @shift(1);
    }
    #2
    {
        @span-columns(5);
        @shift(-1);
    }


}

or maybe use the direction-context mixin to switch the direction of #2...

sass/sccs:

#wrapper
{
    #1
    {
        @include include span-columns(5);
        @include shift(1);
    }

        @include direction-context(right-to-left)
        {
            #2
            {
                @include span-columns(5);
                @include shift(-1);
            }
        }

}

I'm not sure if I'm 100% following your issue but if you mean you can't get the left div's RIGHT side to touch the right div's LEFT side directly in the middle, than I believe these 2 solutions will work if you play with them a bit..

Let me know how it works~gl!

Answer 3

You can do something like @include span-columns(6 of 12,block-collapse)