Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="content-block-alpha">
  <div class="content-cell">
    Words words words words words words
  </div>
  <div class="content-cell">
    Words words words words words words words words words words words words words words words words words words words words words words words words words words words words
  </div>
  <div class="content-cell">
    Words words words words words words words words words words words words words words words
  </div>
  <div class="content-cell">
    Words words words words words words words words words words words
  </div>
</div>

<div class="content-block-bravo">
  <div class="content-cell">
    Words words words words words words
  </div>
  <div class="content-cell">
    Words words words words words words words words words words words words words words words words words words words words words words words words words words words words
  </div>
  <div class="content-cell">
    Words words words words words words words words words words words words words words words
  </div>
  <div class="content-cell">
    Words words words words words words words words words words words
  </div>
</div>

<div class="content-block-charlie">
  <div class="content-cell">
    Words words words words words words
  </div>
  <div class="content-cell">
    Words words words words words words words words words words words words words words words words words words words words words words words words words words words words
  </div>
  <div class="content-cell">
    Words words words words words words words words words words words words words words words
  </div>
  <div class="content-cell">
    Words words words words words words words words words words words
  </div>
</div>

<div class="content-block-delta">
  <div class="content-cell">
    Words words words words words words
  </div>
  <div class="content-cell">
    Words words words words words words words words words words words words words words words words words words words words words words words words words words words words
  </div>
  <div class="content-cell">
    Words words words words words words words words words words words words words words words
  </div>
  <div class="content-cell">
    Words words words words words words words words words words words
  </div>
</div>

SassMeister-input.scss

// ----
// libsass (v3.2.4)
// ----

* {
  box-sizing: border-box;
}

// option with floats and setting a min-height
// technique is flawed as min-height is always a guess that will undershoot
// or overshoot intended design UI
// This float technique also required a clearfix (not shown)
// Not to mention all other kinds of bullshit you need to deal with
.content-block-alpha {
  width: 70%;
  margin: 0 auto;
  background-color: yellow;
  .content-cell {
    padding: 10px 0;
    margin: 0 10px;
    width: 22.5%;
    float: left;
    min-height: 10em;
    background-color: pink;
    &:nth-child(even) {
      background-color: brown;
    }
  }
}

// Using a display: table-cell technique eliminates the need for
// floats and min-height guessing
// The one HUGE flaw in this sceanrio is that margin
// is not applicable to table-cell
.content-block-bravo {
  width: 70%;
  margin: 0 auto;
  background-color: yellow;
  .content-cell {
    display: table-cell;
    padding: 10px 0;
    margin: 0 10px;
    width: 25%;
    background-color: pink;
    &:nth-child(even) {
      background-color: brown;
    }
  }
}

// display: inline-block is a good solution, but you are required to address
// similar issues with the width of the content container as in previous
// solutions. In order to get the heights to be consistent, there are
// additional hacks you need to apply
.content-block-charlie {
  display: table;
  overflow: hidden;
  width: 70%;
  margin: 0 auto;
  background-color: yellow;
  .content-cell {
    display: inline-block;
    height: 200%;
    vertical-align: top;
    width: 22.5%;
    padding: 10px 0;
    margin: 0 10px;
    background-color: pink;
    &:nth-child(even) {
      background-color: brown;
    }
  }
}

// Flex-box is infinatelly more 'flexible' and cleanest,
// but browser support has issues
// I'd suggest going with a flex-box soluiton with a .no-flexbox
// modernizr fallback support selector
.content-block-delta {
  display: flex;
  width: 70%;
  margin: 0 auto;
  background-color: yellow;
  .content-cell {
    flex-basis: 25%;
    padding: 10px 0;
    margin: 0 10px;
    background-color: pink;
    &:nth-child(even) {
      background-color: brown;
    }
  }
}

SassMeister-output.css

* {
  box-sizing: border-box;
}

.content-block-alpha {
  width: 70%;
  margin: 0 auto;
  background-color: yellow;
}

.content-block-alpha .content-cell {
  padding: 10px 0;
  margin: 0 10px;
  width: 22.5%;
  float: left;
  min-height: 10em;
  background-color: pink;
}

.content-block-alpha .content-cell:nth-child(even) {
  background-color: brown;
}

.content-block-bravo {
  width: 70%;
  margin: 0 auto;
  background-color: yellow;
}

.content-block-bravo .content-cell {
  display: table-cell;
  padding: 10px 0;
  margin: 0 10px;
  width: 25%;
  background-color: pink;
}

.content-block-bravo .content-cell:nth-child(even) {
  background-color: brown;
}

.content-block-charlie {
  display: table;
  overflow: hidden;
  width: 70%;
  margin: 0 auto;
  background-color: yellow;
}

.content-block-charlie .content-cell {
  display: inline-block;
  height: 200%;
  vertical-align: top;
  width: 22.5%;
  padding: 10px 0;
  margin: 0 10px;
  background-color: pink;
}

.content-block-charlie .content-cell:nth-child(even) {
  background-color: brown;
}

.content-block-delta {
  display: flex;
  width: 70%;
  margin: 0 auto;
  background-color: yellow;
}

.content-block-delta .content-cell {
  flex-basis: 25%;
  padding: 10px 0;
  margin: 0 10px;
  background-color: pink;
}

.content-block-delta .content-cell:nth-child(even) {
  background-color: brown;
}

SassMeister-rendered.html

<div class="content-block-alpha">
  <div class="content-cell">
    Words words words words words words
  </div>
  <div class="content-cell">
    Words words words words words words words words words words words words words words words words words words words words words words words words words words words words
  </div>
  <div class="content-cell">
    Words words words words words words words words words words words words words words words
  </div>
  <div class="content-cell">
    Words words words words words words words words words words words
  </div>
</div>

<div class="content-block-bravo">
  <div class="content-cell">
    Words words words words words words
  </div>
  <div class="content-cell">
    Words words words words words words words words words words words words words words words words words words words words words words words words words words words words
  </div>
  <div class="content-cell">
    Words words words words words words words words words words words words words words words
  </div>
  <div class="content-cell">
    Words words words words words words words words words words words
  </div>
</div>

<div class="content-block-charlie">
  <div class="content-cell">
    Words words words words words words
  </div>
  <div class="content-cell">
    Words words words words words words words words words words words words words words words words words words words words words words words words words words words words
  </div>
  <div class="content-cell">
    Words words words words words words words words words words words words words words words
  </div>
  <div class="content-cell">
    Words words words words words words words words words words words
  </div>
</div>

<div class="content-block-delta">
  <div class="content-cell">
    Words words words words words words
  </div>
  <div class="content-cell">
    Words words words words words words words words words words words words words words words words words words words words words words words words words words words words
  </div>
  <div class="content-cell">
    Words words words words words words words words words words words words words words words
  </div>
  <div class="content-cell">
    Words words words words words words words words words words words
  </div>
</div>