How to add columns to your posts and pages

last update: May 4, 2021 in:
  1. Open a post or a page in the editor
  2. Click on the first icon from left to right and select "HTML view"
  3. Copy the HTML below for 2, 3 or 4 columns
  4. Replace <!-- add content here --> with your images, text or both

Important notes
  • Don't edit the posts/pages in "Compose view" because it will mess up the HTML
  • Your text has to be wrapped in <p></p>

  • Two Columns
  • Three Columns
  • Four Columns
<div class="grid-items cols-2">
<!-- add content here -->
</div>
<div class="grid-items cols-3">
<!-- add content here -->
</div>
<div class="grid-items cols-4">
<!-- add content here -->
</div>


Examples

I've only used text for the examples, but you can add images, too.

Two Columns

HTML:

<div class="grid-items cols-2">
<p>Column One</p>
<p>Column Two</p>
</div>

Result:

Column One

Column Two



Three Columns

HTML:

<div class="grid-items cols-3">
<p>Column One</p>
<p>Column Two</p>
<p>Column Three</p>
</div>

Result:

Column One

Column Two

Column Three



Four Columns

HTML:

<div class="grid-items cols-4">
<p>Column One</p>
<p>Column Two</p>
<p>Column Three</p>
<p>Column Four</p>
</div>

Result:

Column One

Column Two

Column Three

Column Four