Columns (Grid columns) for Ghost

Themes
1

Love Ghost, and how using it with its limitations is forcing me to be more creative. Contrary to Wordpress, I used to over-design and customize things.

However, I’m wondering if there’s a way to add columns, like maybe 2 columns in a post or page. Could be useful to make certain pages more scalable and beautify them.

image
image820×446 66.9 KB

Thanks in advance!

2

Yes. The answer is theme-specific. Which theme?

3

Thanks Cathy.

It’s Basho theme. Basho — Multipurpose Ghost Theme

4

Thanks for linking it! Much easier if I can see a site, and the demo works fine for that.

So, a very simple code injection would be this:

<style>
.post-content {
  columns: 2
}
</style>

If you only have text content and not very much of it, that will work OK, although you probably only want to apply that to bigger screens (because two columns on a phone - UGH), so more like this (feel free to adjust width breakpoint as needed of course!):

<style>
@media screen and (min-width:900px) {
.post-content {
  columns: 2
}
}
</style>

BUT… that’s going to look really weird on long posts. It’s going to be bad user experience to scroll the screen up and down to read the second column. And images get weird - you’d need styling to make them small enough to fit in a single column, and they’re not, currently.

A better solution is to wrap the content that you want to wrap. So in the post editor, you’d create an HTML card right before the content that you want in two columns, that contains this:
<div class="double-column">
Then put in your content normally. At the end of where you want two columns to be, make another HTML card with:
</div>
And finally, you need to load a style for .double-column. You can put it in code injection, or in the HTML card on the post, but it should look like:

<style>
@media screen and (min-width:900px) {
.post-content .double-column {
  columns: 2
}
}
</style>

Happy Ghosting!

Update - now works in the beta editor too, as long as you’re on the latest Ghost version!

1 Like
5

Thanks Cathy,

I’m going to try this out for the blog.
Really appreciate your help.

Cheers,
Reuben

1 Like
6

Has this solution worked?

7

Yeah, did you try it?

8

Hi Cathy, I tried it on one of the individual pages and posts, but didn’t notice any change. Here’s how I inserted it >>

9

Does your theme use a .post-content class? Did you wrap the content with a .double-column class in html cards?

10

I do not know that :( I am using Source theme on the Ghost Starter Plan.

11

I can’t help you from a screenshot. If you want help, link the live site.

12

Hi Cathy, here is the page I tried the code on >>

13

I see the style, but nowhere to I see you applying the style. Did you follow this?

As long as you’re wrapping just one section, you can omit the .post-content part of the selector. (Your theme doesn’t use that selector anyway.)