Content Comparison

...

The above example shows 3 different grid sizes each with content inside. The spacing between each grid container is 20px and the spacing inside each grid container is 20px. This is achieve achieved by:

<div class="col-two-thirds">
    <div class="content-padding-sml">
        <div class="content-padding-med

"

>
            Content Here
        </div>
    </div>
</div>

<div class="col-third">
    <div class="content-padding-sml">
        <div class="content-padding-med"

>
            More Content Here
        </div>
    </div>
</div>

<div class="col-full">
    <div class="content-padding-sml">
        <div class="content-padding-med

">
            Other Content Here
        </div>
    </

div>
</div>

Can’t achieve the 20px gap?

There may be certain use cases where using either .content-padding-sml and/or .content-padding-med does not allow the desired 20px spacing between elements and often when creating new layouts, the spacing above/below/in between elements can be more than 20px.

For these instances, the below classes can be used in conjunction to alleviate some of the spacing issues that can sometimes occur.

.content-padding-no-top { padding-top: 0 }

.content-padding-no-btm { padding-bottom: 0 }