It's easy to create multi-column layouts in Ghost. You just need a little HTML.

But the good news is you don't have to code the entire thing in HTML. You can set up a row and give it the right HTML classes, then write your content for one column using normal markdown or the Koenig editor — whatever you like.

How to do use grids and columns in Ghost with simple HTML

Just insert some HTML with this code to create a row, then a div defined as being half the width of the row:

<div class="row">
    <div class="col-6">

Then put in content for your first column.

You might have to use different nomenclature for the class col-6 depending on the CSS of your theme.

Insert more HTML to close out this column and start the next column:

    </div>
    <div class="col-6">

Put in stuff for your second column.

Then close it out!

    </div>
</div>

What it looks like

Your result should look something like the following two columns.

This is column one.

Look!

  • I'm putting a list
  • And it stays here.
  • Some more things

Here's an image of pyramids that's going in this column.

Yes, you really need to visit Egypt. More on this at Discover Discomfort.

This is column 2.

Another list of items:

  • Apples
  • Elephants
  • Bananas

And another picture, this time of a motorcycle:

The Ducati 916 is the most beautiful motorcycle of all time. And unfortunately, it's more expensive than ever.

Voila!