Really Simple Grid - HTML

really-simple-grid.css

/*
Really Simple Grid Sysrem
*/

.grid img {
	max-width: 100%;
	height: auto;
}
.grid {
  width: 100%;
  margin: auto;
  padding: 0 10% 2rem 10%;
}
.example > div {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  box-shadow: inset 0 0 1px #555
}
.grid:after {
  content: "";
  display: table;
  clear: both;
}
@media (min-width: 40rem) {
  .grid .grid {
    padding: 2rem 0;
  }
  .grid > div {
    float: left;
    padding: 0 1rem;
  }
  .grid .full {
    width: 100%
  }
  .grid .half {
    width: 50%;
  }
  .grid .third {
    width: 33.333333333333%;
  }
  .grid .two-thirds {
    width: 66.666666666667%;
  }
  .grid .quarter {
    width: 25%;
  }
  .grid .three-quarters {
    width: 75%;
  }
}
@media (min-width: 80rem) {
  .grid {
    width: 75rem;
    margin: auto;
    padding: 0
  }
  .grid .grid {
    width: 100%
  }
}

really-simple-grid.html

<div class="grid">
  <div class="full">.full</div>
</div>
<div class="grid">
  <div class="half">.half</div>
  <div class="half">.half</div>
</div>
<div class="grid">
  <div class="third">.third</div>
  <div class="third">.third</div>
  <div class="third">.third</div>
</div>
<div class="grid">
  <div class="quarter">.quarter</div>
  <div class="quarter">.quarter</div>
  <div class="quarter">.quarter</div>
  <div class="quarter">.quarter</div>
</div>
<div class="grid">
  <div class="third">.third</div>
  <div class="two-thirds">.two-thirds</div>
</div>
<div class="grid">
  <div class="quarter">.quarter</div>
  <div class="three-quarters">.three-quarters</div>
</div>

HTML example for Really Simple Grid system