Nesting

<div class="grid">
    <div class="grid__cell grid__cell--s12 grid__cell--m6 grid__cell--l4">
        <div class="grid-placeholder"></div>
    </div>
    <div class="grid__cell">
        <div class="grid">
            <div class="grid__cell grid__cell--m12">
                <div class="grid-placeholder"></div>
            </div>
            <div class="grid__cell grid__cell--m12">
                <div class="grid-placeholder"></div>
            </div>
        </div>
    </div>
</div>
import {grid} from '../../../../common/utils/classnames';

export default () => (
  <div className='grid'>
    <div className={grid({s: 12, m: 6, l: 4})}>
      <div className='grid-placeholder'></div>
    </div>
    <div className='grid__cell'>
      <div className='grid'>
        <div className={grid({m: 12})}>
          <div className='grid-placeholder'></div>
        </div>
        <div className={grid({m: 12})}>
          <div className='grid-placeholder'></div>
        </div>
      </div>
    </div>
  </div>
);
/* No context defined for this component. */

Grids can be nested. This is useful in combination with size modifier classes, when the layout needs to change in more complex ways between breakpoints.