Column

Columns are powered by CSS flexbox and Grid layouts. You can create responsive columns using below shortcodes.

Two Equal Width Columns With Gap

<div class="items">
<div>First column content..</div>
<div>Second column content..</div>
</div>

Three Equal Width Columns With Gap

<div class="items">
<div>First column content..</div>
<div>Second column content..</div>
<div>Third column content..</div>
</div>

Four Equal Width Columns With Gap

<div class="items">
<div>First column content..</div>
<div>Second column content..</div>
<div>Third column content..</div>
<div>Fourth column content..</div>
</div>

Equal Width Columns With No Gap

<div class="columns">
<div class="column">First column content..</div>
<div class="column">Second column content..</div>
</div>
<div class="columns">
<div class="column">First column content..</div>
<div class="column">Second column content..</div>
<div class="column">Third column content..</div>
</div>
<div class="columns">
<div class="column">First column content..</div>
<div class="column">Second column content..</div>
<div class="column">Third column content..</div>
<div class="column">Fourth column content..</div>
</div>

Columns Of Un-Equal Widths

All un-equal widths columns will transform to full width columns in mobile devices.

w10 will set width to 10%
w20 will set width to 20%
w30 will set width to 30%
w40 will set width to 40%
w50 will set width to 50%
w60 will set width to 60%
w70 will set width to 70%
w80 will set width to 80%
w90 will set width to 90%

Two Columns - 30% and 70%

<div class="columns">
<div class="w30">your content here...</div>
<div class="w70">your content here...</div>
</div>

Two Columns - 60% and 40%

<div class="columns">
<div class="w60">your content here...</div>
<div class="w40">your content here...</div>
</div>

Two Columns - 80% and 20%

<div class="columns">
<div class="w80">your content here...</div>
<div class="w20">your content here...</div>
</div>

Three Columns - 30%, 30%, 40%

<div class="columns">
<div class="w30">your content here...</div>
<div class="w30">your content here...</div>
<div class="w40">your content here...</div>
</div>

Three Columns - 50%, 30%, 20%

<div class="columns">
<div class="w50">your content here...</div>
<div class="w30">your content here...</div>
<div class="w20">your content here...</div>
</div>