html - SCSS Grid: more columns in row then maximum margin issue -

html - SCSS Grid: more columns in row then maximum margin issue -

i have own made grid scheme wich supports 12colums. can alter in these variables:

$column-count: 12; $row-max-width: 1024px; $gutter-width-px: 10px !default; $gutter-width-procent: percentage($gutter-width-px / $row-max-width);

this how sizes calculated:

@function calculate-one-column() { $a: 100%; @if ($gutter-width-px > 0px) { $a: ($a - ($gutter-width-procent * ($column-count - 1))); } @return $a / $column-count; } @function calculate-each-gutter() { @if ($gutter-width-px > 0px) { @return $gutter-width-procent; } @return 0; } @function calculate-function($function, $size, $first-child: false, $responsive: false) { $each-column: calculate-one-column() * $size; $each-gutter: calculate-each-gutter() * ($size - 1); @if ($function == 'size') { @return $each-column + $each-gutter; } @else if ($function == 'offset' , $first-child == false) , ($responsive == false) { @return $each-column + $each-gutter + ($gutter-width-procent * 1.5); } @else if ($function == 'push' or $function == 'pull') , ($responsive == false) or ($function == 'offset' , $first-child == true) { @return $each-column + $each-gutter + $gutter-width-procent; } @else if($function == 'offset' or 'push' or 'pull') , ($responsive == true) { @return auto !important; } } @mixin make-grid-sizes() { @for $index 1 through $column-count { &.#{$column-size}-#{$index} { width: calculate-function('size', $index); } } }

the html markup row 12 columns in of size-1 looks this:

<div class="row"> <div class="column size-1">...</div> <div class="column size-1">...</div> <div class="column size-1">...</div> <div class="column size-1">...</div> <div class="column size-1">...</div> <div class="column size-1">...</div> <div class="column size-1">...</div> <div class="column size-1">...</div> <div class="column size-1">...</div> <div class="column size-1">...</div> <div class="column size-1">...</div> <div class="column size-1">...</div> </div>

ofcourse, can aswell:

<div class="row"> <div class="column size-2">...</div> <div class="column size-2">...</div> <div class="column size-2">...</div> <div class="column size-2">...</div> <div class="column size-2">...</div> <div class="column size-2">...</div> </div>

or other combinations.

first, looks (12 columns of size-1, 1 row):

i had give :first-child margin-left of 0, , :last-child margin-right of 0.

this because every column has margin on every side of $gutter-width-procent / 2:

margin: 0 #{$gutter-width-procent / 2};

then looks (this 1 row):

this working perfect, limited putting 12 columns in 1 row.

now when add together illustration 24 columns of size-1 in row, looks (still same row):

i able prepare adding these css rules it:

(each lastly column margin-right of 0 , each first column margin-left of 0)

&:first-child, &:nth-of-type(#{$column-count}n + 1) { margin-left: 0; } &:last-child, &:nth-of-type(#{$column-count}n) { margin-right: 0; }

but worked column size-1.

question

how can create every first column in 'row' in row html elementhas margin-left 0.

and same lastly column, margin-right of 0.

demo here

one solution add together negative margins .row:

.row { margin: 0 -#{$gutter-width-procent / 2}; }

then can remove &:first/last/nth-child-selectors col gutters "slip" negative margin space.

updated js-fiddle

i had alter width values (didn't alter all) business relationship added width caused negative margins. bit unfamiliar me since utilize susy takes care of me. need alter function calculating widths somewhat. how did calculation:

$column-count: 12; $row-max-width: 1024px; $gutter-width-px: 10px !default; @function col($cols: 1) { $row-width-neg-margin-width: $row-max-width + $gutter-width-px; @return ( ( $row-width-neg-margin-width / ($column-count / $cols) ) - $gutter-width-px ) / $row-width-neg-margin-width * 100%; }

html css grid sass