Grids and Columns in HTML — Without Bootstrap

It’s easy and quick to create multi-column layouts using HTML.

This is useful in platforms like Ghost, where 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.

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.

Want to try building your own blog on Ghost, the simplest blogging platform? Try Ghost for 2 Weeks for free

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>
    /* Universal box-sizing */
    * {
        box-sizing: border-box;
    }

    /* Create two equal columns that float next to each other */
    .col-2 {
        float: left;
        width: 50%;
        padding: 10px;
    }

    .col-3 {
        float: left;
        width: 33.33%; /* updated for accuracy */
        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: Anything on Hooshmand.net.