@collab-ui/core/scss/layouts/layout-grid/examples/complex.html

Cisco Collab UI CSS Framework

<div class="show-grid">
  <div class="row">
    <div class="columns medium-9">.medium-9</div>
    <div class="columns medium-3">.medium-3</div>
    <div class="columns small-12">
      <div class="row collapse">
        <h5 class="small columns small-12 text-right">.small-12 .{small|medium|large}-block-grid-collapse</h5>
        <div class="small-12 columns small-block-grid-2 medium-block-grid-3 large-block-grid-6 collapse">
          <div class="">
            <img src="https://place-hold.it/200x200&text=First&fontsize=33"/>
          </div>
          <div class="">
            <img src="https://place-hold.it/200x200&text=Second&fontsize=33"/>
          </div>
          <div class="">
            <img src="https://place-hold.it/200x200&text=Third&fontsize=33"/>
          </div>
          <div class="">
            <img src="https://place-hold.it/200x200&text=Fourth&fontsize=33"/>
          </div>
          <div class="">
            <img src="https://place-hold.it/200x200&text=Fifth&fontsize=33"/>
          </div>
          <div class="">
            <img src="https://place-hold.it/200x200&text=Sixth&fontsize=33"/>
          </div>
        </div>
        <div class="small-12 columns small-block-grid-2 medium-block-grid-3 collapse">
          <div class="">
            <img src="https://place-hold.it/200x200&text=Seventh&fontsize=33"/>
          </div>
          <div class="">
            <img src="https://place-hold.it/200x200&text=Eighth&fontsize=33"/>
          </div>
          <div class="">
            <img src="https://place-hold.it/200x200&text=Nineth&fontsize=33"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>