Grid Mashup A CodePen by Keith Wyland. Grids Mashup - Taking pieces from both CSS-Tricks "Don't Over-think It Grids" and CSSWizardry Grids, to make my own mashup of a grid. Mainly, I didn't want to always deal with the inline-block spacing problems. So I'm going with floats (you'll notice that breaks down in some cases, but I'm OK with that in t…

gridmashup.html

<div class="page-wrap">
  
  <h1><span class="csstricks">CSS-Tricks</span> and <span class="csswizardry">CSSWizardry</span> Grids Mashup</h1>
  <p>Using floats and box-sizng: border-box (from <a href="http://css-tricks.com/dont-overthink-it-grids/">CSS-Tricks</a>) and .grid__item, ".one-half"-style size names, and margin/padding cancelling (from <a href="http://csswizardry.com/csswizardry-grids/">CSSWizardry</a>).</p>
  <p><em>(This is a work in progress)</em></p>
  
  <h2>Simple Sections</h2>
  <div class="grid">
    
    <div class="grid__item one-half">
      <div class="demo-block">1/2</div>
    </div>
    <div class="grid__item one-half">
      <div class="demo-block">1/2</div>
    </div>
    
    <div class="grid__item one-third">
      <div class="demo-block">1/3</div>
    </div>
    <div class="grid__item two-thirds">
      <div class="demo-block">2/3</div>
    </div>
    
    <div class="grid__item one-quarter">
      <div class="demo-block">1/4</div>
    </div>
    <div class="grid__item three-quarters">
      <div class="demo-block">3/4</div>
    </div>
    
    <div class="grid__item one-fifth">
      <div class="demo-block">1/5</div>
    </div>
    <div class="grid__item four-fifths">
      <div class="demo-block">4/5</div>
    </div>
    
    <div class="grid__item two-fifths">
      <div class="demo-block">2/5</div>
    </div>
    <div class="grid__item three-fifths">
      <div class="demo-block">3/5</div>
    </div>
    
    <div class="grid__item one-sixth">
      <div class="demo-block">1/6</div>
    </div>
    <div class="grid__item five-sixths">
      <div class="demo-block">5/6</div>
    </div>
    
    <div class="grid__item one-eighth">
      <div class="demo-block">1/8</div>
    </div>
    <div class="grid__item seven-eighths">
      <div class="demo-block">7/8</div>
    </div>
    
    <div class="grid__item three-eighths">
      <div class="demo-block">3/8</div>
    </div>
    <div class="grid__item five-eighths">
      <div class="demo-block">5/8</div>
    </div>
    
  </div>
  
  <h2>Full Grid (gutterless)</h2>
  
  <div class="grid grid--full">
    
    <div class="grid__item one-quarter">
      <div class="demo-block">1/4</div>
    </div>
    <div class="grid__item one-quarter">
      <div class="demo-block">1/4</div>
    </div>
    <div class="grid__item one-quarter">
      <div class="demo-block">1/4</div>
    </div>
    <div class="grid__item one-quarter">
      <div class="demo-block">1/4</div>
    </div>
    
    <div class="grid__item one-third">
      <div class="demo-block">1/3</div>
    </div>
    <div class="grid__item one-third">
      <div class="demo-block">1/3</div>
    </div>
    <div class="grid__item one-third">
      <div class="demo-block">1/3</div>
    </div>
  </div>
  
  <h2>Centered Grid Items </h2>
  <p><em>(Only works by using inline-block, no float, and HTML comment to remove added "inline" spacing. Not very cool, but might be OK for my use.)</em></p>
  
  <div class="grid grid--center">
    <div class="grid__item three-eighths">
      <div class="demo-block">3/8</div>
    </div><!-- 
    --><div class="grid__item three-eighths">
      <div class="demo-block">3/8</div>
    </div>
  </div>
  
  <h2>Nested Grids</h2>
  <div class="grid">
    <div class="grid__item one-half">
      <div class="grid">
        <div class="grid__item one-half">
          <div class="demo-block">1/2 (of 1/2)</div>
        </div>
        <div class="grid__item one-half">
          <div class="demo-block">1/2 (of 1/2)</div>
        </div>
      </div>
    </div>
    <div class="grid__item one-half">
      <div class="grid">
        <div class="grid__item one-third">
          <div class="demo-block">1/3 (of 1/2)</div>
        </div>
        <div class="grid__item two-thirds">
          <div class="demo-block">2/3 (of 1/2)</div>
        </div>
      </div>
    </div>
  </div>
  
  <h2>Used on &lt;ul&gt;</h2>
  <ul class="grid">
    <li class="grid__item one-fifth">
      <span class="demo-block">1/5 &lt;li&gt;</span>
    </li>
    <li class="grid__item one-fifth">
      <span class="demo-block">1/5 &lt;li&gt;</span>
    </li>
    <li class="grid__item one-fifth">
      <span class="demo-block">1/5 &lt;li&gt;</span>
    </li>
    <li class="grid__item one-fifth">
      <span class="demo-block">1/5 &lt;li&gt;</span>
    </li>
    <li class="grid__item one-fifth">
      <span class="demo-block">1/5 &lt;li&gt;</span>
    </li>
  </ul>
</div>

style.css

* {
  box-sizing: border-box;
}


.page-wrap {
  width: 90%;
  margin: 18px auto;
}

.grid {
  list-style: none;
  margin: 0 0 0 -18px;
  padding: 0;
  *zoom: 1;
}
.grid:before,
.grid:after {
    content: " ";
    display: table;
}
.grid:after {
    clear: both;
}

.grid__item {
  float: left;
  margin-bottom: 18px;
  padding-left: 18px;
  width: 100%;
}

/* gutterless, no spacing for full. extension of .grid, NOT .grid__item
So, <div class="grid grid--full"> ... */
.grid--full {
  margin-left: 0;
}
.grid--full > .grid__item {
  padding-left: 0;
}


/* center the .grid__items, extension of .grid */
.grid--center {
  text-align: center;
}
.grid--center > .grid__item {
  float: none;
  display: inline-block;
  text-align: left;
}


/* Sizes */

/* whole */
.one-whole {
  width: 100%;
}

/* half */
.one-half {
  width: 50%;
}

/* thirds */
.one-third {
  width: 33.333%;
}
.two-thirds {
  width: 66.666%;
}

/* quarter */
.one-quarter {
  width: 25%;
}
.three-quarters {
  width: 75%;
}

/* fifths */
.one-fifth {
  width: 20%;
}
.two-fifths {
  width: 40%;
}
.three-fifths {
  width: 60%;
}
.four-fifths {
  width: 80%;
}

/* sixths */
.one-sixth {
  width: 16.666%;
}
.five-sixths {
  width: 83.333%;
}

/* eighths */
.one-eighth {
  width: 12.5%;
}
.three-eighths {
  width: 37.5%;
}
.five-eighths {
  width: 62.5%;
}
.seven-eighths {
  width: 87.5%;
}


/* Demo stuff to show the grids */
.demo-block {
  background-color: #7788dd;
  background-image: linear-gradient(rgb(225, 135, 40), rgb(244, 48, 89));
  border-radius: 6px;
  color: white;
  display: block;
  font-weight: bold;
  padding: 18px;
  text-align: center;
}


h1 { color: #4455aa; }

.csstricks {
  color: rgb(225, 135, 40);
}
.csswizardry {
  color: rgb(244, 48, 89);
}