css_wizardry simplified

by Richard Hunter

HTML

<h1>
Grid base system
</h1>
<p>
The key concepts here are that a grid is an element which contains grid items. Grid items provide containers for the elements that are to be positioned. floats are not used. grid items are inline block display. The font size of the grid element is set to 0 to remove white space gaps between grid items. grid items represent fractions (e.g. half, quarter, eight etc.) of the width of the grid plus the width of the gutter between columns. gutters are formed by left padding on the grid items.
</p>

<div class="container">
  <div class="grid">
    <div class="grid__item--half">
      <div class="yellow">
        hello
      </div>
    </div>
    <div class="grid__item--half">
      <div class="yellow">
        world
      </div>
    </div>
  </div>
  <div class="grid">
    <div class="grid__item--half">
      <div class="grid blah">
        <div class="grid__item--half">
          <div class="green">hello</div>
        </div>
        <div class="grid__item--half">
          <div class="green">goodbye</div>
        </div>
      </div>
    </div>
    <div class="grid__item--half bar">
      <div class="grid blah">
        <div class="grid__item--half">
          <div class="green">hello</div>
        </div>
        <div class="grid__item--half">
          <div class="green">goodbye</div>
        </div>
      </div>
    </div>
  </div>
  <div class="grid">
    <div class="grid__item--quarter">
      <div class="blue">
        lallal
      </div>
    </div>
    <div class="grid__item--quarter">
      <div class="blue">
        lallal
      </div>
    </div>
    <div class="grid__item--quarter">
      <div class="blue">
        it's
      </div>
    </div>
    <div class="grid__item--quarter">
      <div class="blue">
        the
      </div>
    </div>
  </div>
</div>

CSS

.container {
  width: 500px;
  margin: 100px auto;
  background: pink;
  height: 300px;
}

.green {
  background: green;
}

.blue {
  background: blue;
}

.yellow {
  background: yellow;
}

.grid {
  background: transparent;
  padding: 0;
  margin: 0;
  margin-left: -20px;
  font-size: 0;
}

.grid__item--half,
.grid__item--quarter {
  background: red;
  font-size: 20px;
  padding-left: 20px;
  box-sizing: border-box;
  display: inline-block;
}

.grid__item--half {
  width: 50%;
}

.grid__item--quarter {
  width: 25%;
}