Generated by SassMeister.com.

SassMeister-input-HTML.html

<ul class="programs"><li>
<h2 class="gamma">Doctor of Philosophy</h2>
<p>    <img src="http://placehold.it/400x117"></p>
<p>Develop competencies to design, conduct, and report original theoretical and applied research in learning and human performance technologies.</p>
</li>
<li>
<h2 class="gamma">Master of Arts</h2>
<p>    <img src="http://placehold.it/400x117"></p>
<p>Combine aspects of adult learning, learning sciences, organizational learning and development, and instructional technology.</p>
</li>
<li>
<h2 class="gamma"><a href="bachelor-science-technology-training">Bachelor of Science in Technology &amp; Training</a></h2>
<p>    <img src="http://placehold.it/400x117"></p>
<p>Enables students who have completed an associate degree at a community college to complete a bachelor’s degree at UNM.</p>
</li>
<li>
<h2 class="gamma">Professional Development Certificates</h2>
<p>    <img src="http://placehold.it/400x117"></p>
<p>An opportunity for working professionals to upgrade their skills and knowledge and gain new job opportunities.</p>
</li>
</ul>

SassMeister-input.scss

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// Zen Grids (v1.4)
// ----

@import "zen";

$zen-column-count: 3;
$zen-gutter-width: 20px;

.programs {
 @include zen-grid-container;
 list-style: none;
 margin: 0;
 padding: 0;
}

.programs li {
  min-height: 250px;
  max-width: 30%;
}

.programs li:nth-child(odd) {
  @include zen-grid-item(1, 1, left);
  @include zen-clear(left);
}

.programs li:nth-child(even) {
  @include zen-grid-item(1, 2);
}

SassMeister-output.css

.programs {
  list-style: none;
  margin: 0;
  padding: 0;
}
.programs:before, .programs:after {
  content: "";
  display: table;
}
.programs:after {
  clear: both;
}

.programs li {
  min-height: 250px;
  max-width: 30%;
}

.programs li:nth-child(odd) {
  float: left;
  width: 33.33333%;
  margin-left: 0%;
  margin-right: -33.33333%;
  padding-left: 10px;
  padding-right: 10px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  word-wrap: break-word;
  clear: left;
}

.programs li:nth-child(even) {
  float: left;
  width: 33.33333%;
  margin-left: 33.33333%;
  margin-right: -66.66667%;
  padding-left: 10px;
  padding-right: 10px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  word-wrap: break-word;
}

SassMeister-rendered.html

<ul class="programs"><li>
<h2 class="gamma">Doctor of Philosophy</h2>
<p>    <img src="http://placehold.it/400x117"></p>
<p>Develop competencies to design, conduct, and report original theoretical and applied research in learning and human performance technologies.</p>
</li>
<li>
<h2 class="gamma">Master of Arts</h2>
<p>    <img src="http://placehold.it/400x117"></p>
<p>Combine aspects of adult learning, learning sciences, organizational learning and development, and instructional technology.</p>
</li>
<li>
<h2 class="gamma"><a href="bachelor-science-technology-training">Bachelor of Science in Technology &amp; Training</a></h2>
<p>    <img src="http://placehold.it/400x117"></p>
<p>Enables students who have completed an associate degree at a community college to complete a bachelor’s degree at UNM.</p>
</li>
<li>
<h2 class="gamma">Professional Development Certificates</h2>
<p>    <img src="http://placehold.it/400x117"></p>
<p>An opportunity for working professionals to upgrade their skills and knowledge and gain new job opportunities.</p>
</li>
</ul>