Custom Grid Setup

by Victor

HTML

Odds
<div class="grid">
    <div class="col-2-3">Two Thirds</div>
    <div class="col-1-3">Third</div>
</div>
<div class="grid">
    <div class="col-2-5">Two fifths</div>
    <div class="col-1-5">One Fifth</div>
        <div class="col-2-5">Two Fifths</div>
</div>
<div class="grid">
        <div class="col-2-5">Two Fifth</div>
        <div class="col-3-5">Three Fifth</div>
</div>

Normals
<div class="grid">
    <div class="col-1-2">half</div>
     <div class="col-1-2">half</div>
</div>
<div class="grid">
    <div class="col-1-3">Third</div>
    <div class="col-1-3">Third</div>
    <div class="col-1-3">Third</div>
</div>

<div class="grid">
    <div class="col-1-4">Fourth</div>
    <div class="col-1-4">Fourth</div>
    <div class="col-1-4">Fourth</div>
    <div class="col-1-4">Fourth</div>
</div>

<div class="grid">
    <div class="col-1-5">Fifth</div>
        <div class="col-1-5">Fifth</div>
        <div class="col-1-5">Fifth</div>
        <div class="col-1-5">Fifth</div>
        <div class="col-1-5">Fifth</div>
</div>


<div class="grid">
    <div class="col-1-8">Eighth</div>
        <div class="col-1-8">Eighth</div>
        <div class="col-1-8">Eighth</div>
        <div class="col-1-8">Eighth</div>
        <div class="col-1-8">Eighth</div>
        <div class="col-1-8">Eighth</div>
        <div class="col-1-8">Eighth</div>
        <div class="col-1-8">Eighth</div>
</div>
<div class="grid">
    <div class="col-1-10">Tenth</div>
        <div class="col-1-10">Tenth</div>
        <div class="col-1-10">Tenth</div>
        <div class="col-1-10">Tenth</div>
        <div class="col-1-10">Tenth</div>
        <div class="col-1-10">Tenth</div>
        <div class="col-1-10">Tenth</div>
        <div class="col-1-10">Tenth</div>
        <div class="col-1-10">Tenth</div>
        <div class="col-1-10">Tenth</div>
</div>
<div class="grid">
    <div class="col-1-12">Twelve</div>
        <div class="col-1-12">Twelve</div>
        <div class="col-1-12">Twelve</div>
        <div...

SCSS

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

$pad: 10px;

.grid {
  background: white;
  margin: 0 auto 0;
    width:100%;
    /* optional max */
    max-width: 800px;
  &:after {
    /* Or @extend clearfix */
    content: "";
    display: table;
    clear: both;
  }
}

[class*='col-'] {
    float:left;
    padding:5px;
  padding-right: $pad;
    background: #4679BD;
    border:1px solid white;
    color:white;
    /*make them all full width if the screen gets smaller  */
    @media screen and (max-width:400px) {
        width:100% !important;
    }
  .grid &:last-of-type {
    padding-right: 0;
  }
}
.col-2-3 {
  width: 66.66%;
}
.col-1-3, .col-4-12 {
  width: 33.33%;
}
.col-1-2, .col-2-4 {
  width: 50%;
}
.col-1-4 {
  width: 25%;
}
.col-1-5 {
    width:20%;
}
.col-2-5 {
    width:40%;
}
.col-3-5 {
    width:60%;
}
.col-1-8 {
  width: 12.5%;
}
.col-1-10 {
  width: 10%;
}
.col-1-12 {
  width: 8.33%;
}
.col-2-12 {
   width: 16.66%;
}
.col-3-12 {
   width:24.99%
}
/* modifiers */

/* Opt-in outside padding - not that useful, possibly take it out*/
.grid-pad {
  padding: $pad 0 $pad $pad;
  [class*='col-']:last-of-type {
    padding-right: $pad;
  }
}
.fr {float:right}
.fl {float:left}
.center {margin: 0 auto !important; float:none;}