Nested Grids

The best part of any grid system is the ability to nest elements within a single grid element to break down the space into smaller, manageable spaces.

For example, say that you want to have content in a ctn-grid-18, but you also want to add three images with captions side-by-side beneath the main block of text. In order to create this layout will need to put three ctn-grid-8 grid elements inside the parent grid element.

<div class="ctn-container">
  <div class="ctn-grid-12">
    <div class="ctn-grid-8"></div>
    <div class="ctn-grid-16"></div>
  </div>
  <div class="ctn-grid-12">
    <div class="ctn-grid-16"></div>
    <div class="ctn-grid-8"></div>
  </div>
</div>