READ ONE GRID - vijayetar/seattle-301d55 GitHub Wiki

How to create a GRID

• CONTEXT
  A block level element is as wide as the parent it's inside (width: auto;). We can think of it as 100% wide.

• COLUMNS
  A main content area being 2/3 the width and a sidebar being 1/3 the width. Also next to each other with float.
  css: [class*='col-'] {float: left;}
  .col-2-3 { width: 66.66%;}
  .col-1-3 {width: 33.33%;}

• AVOID COLLAPSING THE PARENT ELEMENT
  CSS:
  .grid:after {
  content: "";
  display: table;
  clear: both;
  }

• GUTTERS
  The first step toward this is using box-sizing: border-box;.
  CSS:
  *, :after, :before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  }
  The second step is applying a fixed padding to the right side of all columns except the last one.
  CSS:
  [class='col-'] {
  padding-right: 20px;
  }
  [class='col-']:last-of-type {
  padding-right: 0;
  }

• OUTSIDE GUTTERS
  HTML:
  div class="grid grid-pad" Grid with outside gutters also
  /div
  Step one is to add left padding to the grid parent (and optionally top and bottom padding):
  CSS:
  .grid-pad { padding: 20px 0 20px 20px; }
  Step two is to restore the right padding to the last column:
  CSS:
  .grid-pad > [class*='col-']:last-of-type {
  padding-right: 20px;
  }

• MORE COLUMNS
  CSS:
  .col-1-2 {
  width: 50%;
  }
  .col-1-4 {
  width: 25%;
  }
  .col-1-8 {
  width: 12.5%;
  }

• IN SCSS:

• {
  @include box-sizing(border-box);
  }
  $pad: 20px;
  .grid {
  background: white;
  margin: 0 0 $pad 0;
  &:after {
  /* Or @extend clearfix /
  content: "";
  display: table;
  clear: both;
  }
  }
  [class='col-'] {
  float: left;
  padding-right: $pad;
  .grid &:last-of-type {
  padding-right: 0;
  }
  }
  .col-2-3 {
  width: 66.66%;
  }
  .col-1-3 {
  width: 33.33%;
  }
  .col-1-2 {
  width: 50%;
  }
  .col-1-4 {
  width: 25%;
  }
  .col-1-8 {
  width: 12.5%;
  }
  /* Opt-in outside padding /
  .grid-pad {
  padding: $pad 0 $pad $pad;
  [class='col-']:last-of-type {
  padding-right: $pad;
  }
  }