• Visual Language
  • Grid

Nested grid

View Nested grid

Usage notes

The grid system can contain other grids.

 
<h2>Nested grid</h2>
<div class="grid-wrap">
  <div class="grid-col desktop-grid-one-half">
    <div class="grid-wrap">
      <div class="grid-col desktop-grid-one-half">
        <code>One Half of one half</code>
      </div>
      <div class="grid-col desktop-grid-one-half">
        <code>One Half of one half</code>
      </div>
    </div>
  </div>
  <div class="grid-col desktop-grid-one-half">
    <div class="grid-wrap">
      <div class="grid-col desktop-grid-one-third">
        <code>One third of one half</code>
      </div>
      <div class="grid-col desktop-grid-one-third">
        <code>One third of one half</code>
      </div>
      <div class="grid-col desktop-grid-one-third">
        <code>One third of one half</code>
      </div>
    </div>
  </div>
</div>