How to change gutter widths on Responsable CSS Grid

Question

I am using the ResponsableCSS (.com) grid for LESS.

It all works great, the only problem I have is that I can't amend the gutter widths so that if I have the following: -

Two divs side by side split into 2 columns using: -

            header {
                div {
                    .column(6);
                }
            }

The overall grid is 12 divided by 6 = 2

But I want to show the divs side by side with no gutter on the left on the first element and no gutter on the right on the second element.

This would enable me to have 2 elements side by side with a gutter in the middle, as opposed to what I have now: -

http://s13.postimg.org/xnh8sy40n/Untitled_2.png

Heres my full LESS file, any help would be appreciated, I don't think Responsable allows for this out of the box: -

/** * Responsable Grid System */

            /* ========================================================== */
            /* = Site Variables                                         = */
            /* ========================================================== */

            /* Grid options */
            @gutter_width: 18px; // Your gutter width
            @columns: 12; // The amount of columns you want
            @max_width: 960px; // Set a maximum width of the site

            // Half the gutter for borders, margin, padding etc
            @gutter: @gutter_width*0.5;

            /**
             * Baseline
             * 
             * Common settings for this:
             * 
             * 100% for 16px font and 24px baseline.
             * 
             * 75% for 12px font and 18px baseline.
             * 
             */
            @baseline: 100%;

            /* Font variables */
            @body_color: #333;
            @heading_color: #111;

            @body_family: "Open Sans", "Helvetica Neue", Arial, Helvetica, Sans-Serif;
            @heading_family: "Open Sans Condensed", "Helvetica Neue", Arial, Helvetica, Sans-Serif;

            /* Link colors */
            @link: #6bac60;
            @link_hover: #78aace;

            /* Select colors */
            @select: #78aace;
            @select_color: #fff;

            /* Default Colors */
            @grey_light: #ddd;
            @grey_regular: #ccc;
            @grey_dark: #666;

            @green: #6bac60;

            /* ========================================================== */
            /* = Import normalize baseline and grid                    = */
            /* ========================================================== */

            @import "normalize.less";
            @import "baseline.less";
            @import "grid.less";

            /* ========================================================== */
            /* = Your custom styles go here                             = */
            /* ========================================================== */

            .wrapper {
                max-width: 960px;
                margin: 0 auto;
            }

            header {
                .clearfix();
                .column(12, 0);
                div {
                    .column(6);
                }
            }

            @media screen and (max-width: 520px){

            }

Answer 1

When you inspect the .column mixin in the grid.less file of the Responsable-Framework you will find that each column got a padding on each side of half size the gutter-width.

Notice that the grid uses box-sizing: border-box see also Why did Bootstrap 3 switch to box-sizing: border-box?

leveraging the .column mixin you can set the second argument to 0 to remove the padding (gutter):

header {
div {
.column(6,0);
}
}

The above also removes the gutter between you div elements, to remove the gutter only on the borders of the grid you can use the following Less code:

header {
div {
.column(6);
&:first-child {
padding-left: 0; 
}
&:last-child {
padding-right: 0; 
}
}
}