Bootstrap addon better grid (add it before the bootstrap library)

Bootstrap addon better grid (add it before the bootstrap library).markdown

Bootstrap addon better grid (add it before the bootstrap library)

An easy and fast way to make same columns width and without gap

A Pen by Pikilon on CodePen.

License.

index.html

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<style>
  img {
    max-width: 100%;
  }
</style>
<br />
<!--   .row.Row--Grid10--BaseColumnWidth-2>img[src=http://dummyimage.com/600x400/d9d9d9/000000.gif&text=No+gap+grid] -->
<div class="container">

<div class="row Row--BaseColumnWidth--sm-3 Row--BaseColumnWidth--xs-3 Row--noGap">
  <img src="http://dummyimage.com/600x400/d9d9d9/000000.gif&text=No+gap+grid" />
  <img src="http://dummyimage.com/600x400/d9d9d9/000000.gif&text=No+gap+grid" />
  <img src="http://dummyimage.com/600x400/d9d9d9/000000.gif&text=No+gap+grid" />
  <img src="http://dummyimage.com/600x400/d9d9d9/000000.gif&text=No+gap+grid" />
</div>
  <br />
  <div class="row Row--BaseColumnWidth--sm-4  Row--BaseColumnWidth--xs-4">
    <img src="http://dummyimage.com/600x400/d9d9d9/0.gif&text=normal" />
    <img src="http://dummyimage.com/600x400/d9d9d9/0.gif&text=normal" />
    <img src="http://dummyimage.com/600x400/d9d9d9/0.gif&text=normal" />
  </div>
<br />
<div class="row Row--BaseColumnWidth--sm--2  Row--BaseColumnWidth--xs-2">
    <img class="col-sm-8 col-xs-8" src="http://dummyimage.com/600x400/d9d9d9/0.gif&text=big+content"  />

     <img src="http://dummyimage.com/165x500/d9d9d9/0.gif&text=normal" />
    <img src="http://dummyimage.com/165x500/d9d9d9/0.gif&text=normal" />
   
 </div>
  <br />
  <div class="row Row--Grid10--BaseColumnWidth--sm-2  Row--Grid10--BaseColumnWidth--xs-2">
    <img src="http://dummyimage.com/300x200/d9d9d9/000000.gif&text=base+10+columns" />
    <img src="http://dummyimage.com/300x200/d9d9d9/000000.gif&text=base+10+columns" />
    <img src="http://dummyimage.com/300x200/d9d9d9/000000.gif&text=base+10+columns" />
    <img src="http://dummyimage.com/300x200/d9d9d9/000000.gif&text=base+10+columns" />
    <img src="http://dummyimage.com/300x200/d9d9d9/000000.gif&text=base+10+columns" />
  </div>
  <br />
</div>

style.scss

//variables from Bootstrap if you want to customize
$grid-gutter-width: 30px !default;
$half-gutter: $grid-gutter-width / 2;

$screen-sm: 768px !default;
$screen-xs-max: #{$screen-sm - 1} !default;
$screen-md: 992px !default;
$screen-lg: 1200px !default;

//Custom variables to iterate an in media queries
$sizes: (xs, "max-width: " $screen-xs-max), (sm, "min-width: " $screen-sm), (md, "min-width: " $screen-md), (lg, "min-width: " $screen-lg);

$one_column_width: 100%/12;
$one_column_width_base10: 100%/10;

@each $name, $mediaq in $sizes {
  @media (#{$mediaq}) {
    @for $i from 1 through 11 {
      .Row--BaseColumnWidth--#{$name}-#{$i} > * {
        width: $i*$one_column_width;
      }
      @if $i < 10 {
        .Row--Grid10--BaseColumnWidth--#{$name}-#{$i} > * {
                width: $i * $one_column_width_base10;
            }

          //we have to define
          .col10-#{$name}-#{$i} {
              width: $i * $one_column_width_base10;
          }
      }
    }
  }
}
// No gap grid
.row {
  > * {
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: $half-gutter;
    padding-left: $half-gutter;
  }
  &.Row--noGap {
    margin-left: 0;
    margin-right: 0;
    > * {
      padding-left: 0;
      padding-right: 0;
    }
  }
}