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.sass

// ----
// 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>