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-row">
<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>
</div>