It's easy and quick to create multi-column layouts in Ghost using the Koenig editor. While the editor doesn't do it as standard, you only need some very basic HTML  and CSS to do it, and this will work in any theme (including Casper). And you don't even need to use Bootstrap, so if your theme doesn't have Bootstrap, don't worry.

Updated: June 2016, using code to work in any theme.

But the good news is you don't have to code the entire section in HTML. You just bracket your content in the column tags, and then use the Koenig editor for the content.

This currently works in Casper and other simple blogs that don't use Bootstrap or external CSS for columns.

Set up the CSS for columns (without using Bootstrap)

First, set up your CSS. You need to create the column classes. Well call these col-2 and col-3 for columns that take up half the area, or a third of the area.

Tip: You can inject this into your site as global code injection to use this in any post.

<style>
    * {
        box-sizing: border-box;
    }
    
    /* Create two equal columns that floats next to each other */
    .col-2 {
        float: left;
        width: 50%;
        padding: 10px;
    }

	.col-3 {
        float: left;
        width: 32%;
        padding: 10px;
    }

    
    /* Clear floats after the columns */
    .row:after {
        content: "";
        display: table;
        clear: both;
    }
    
    /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
    @media screen and (max-width: 900px) {
        .col-2,.col-3 {
            width: 100%;
        }
    }
<style>

Step 2: Insert the HTML for columns where you need it

Insert HTML with this code to create a div for a row, then a div for the first column:

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

Then put in content for your first column.

You can also use col-3 if you want to create a 3-column layout. (Don't do four columns. It's too much! OK if you really want to, I'm sure you can code it yourself using the above as a guide.)

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

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

Then 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.

This is column 2.

Another list of items:

• Apples
• Elephants
• Bananas

And another picture, this time of a motorcycle:

Voila!

Try making your browser narrower, if you want to see the responsive action on mobile.

Read next: The first five things to modify in Ghost's default Casper theme.