Placing cards side by side?

Using Ghost
1

On Weebly (and I’ll just quote here from the page I’ve linked to),

You can place elements side by side or stack them vertically. You’ll see a blue line indicating where the element will be positioned when you drop it. A vertical line will appear when placing elements side by side, and a horizontal line will be shown when stacking elements on top of one another.

intro-elements-column-drag
intro-elements-column-drag1023×355 49.6 KB

Placing elements side by side will automatically create columns across the page, and you can stack additional elements inside each column. You can adjust the space between these columns by dragging the vertical bar between them to the left or right.

intro-elements-middle-column
intro-elements-middle-column1018×509 47.9 KB

I realise that Ghost is not meant to be a full drag-and-drop website builder like Weebly, however having the option to stack Ghost cards (what Weebly refers to as elements) side by side instead of only vertically would, I think, be very useful. Of course, anything can be done with the HTML card, but the purpose of having other cards is to make it quicker and easier to do stuff, and I think being able to stack cards side by side would contribute a lot to that goal.

2

Trying to consider layout while working on publishing content is kinda hard. Placing two items next to each other seems trivial, but what happens on a mobile device? Or a tablet? What if the item can’t wrap? I think these are some of the reasons Ghost has focused more on the vertical long form content than elaborate layout, which can be left to designers and theme developers.

However if you would like a 2 column layout you could add the following to your site’s code injection:

<style>
    .side-by-side {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 2em;
        margin: .8em 0 2.3em;
        width: 100%;
    }
    .side-by-side > * {
        margin: 0 !important;
    }
</style>

Then you’ll need to add a HTML card both before and after the items you wish to put into 2 columns, the card before:

<div class="side-by-side">

…and the HTML card after:

</div>

Careful though, this will put things into columns on ALL screen sizes. I just tried this with two bookmark cards and it wasn’t pretty :sweat_smile:

Note: You’ll only be able to see the results in the preview, not the editor

1 Like
3

I do understand the point you’re making but I’m not sure I would call having a map beside a contact form or text beside an image an elaborate layout.

I think the problem of what happens with multi-column content on smaller screens is generally solved by using breakpoints. How difficult this would be to implement into Ghost’s codebase though, I admit I have no idea. But probably not trivial, I agree.

Anyway, I appreciate your response and your code suggestion :slightly_smiling_face:

4

This would only be a 1-off use case, right? I think what David is saying is from publishing perspective, multi-column layout expectations can be all over the place

1 Like
5

This would only be a 1-off use case, right? I think what David is saying is from publishing perspective, multi-column layout expectations can be all over the place

I don’t think I agree (or perhaps I misunderstand). What I’m suggesting is that instead of cards only being stacked beneath each other, they might also be stacked horizontally as well (even up to a limit of 2 or 3). It’s very common for websites, including blogs, to have content arranged in columns (hence the popularity of frameworks like Bootstrap, for example).

I understand that Ghost is a publishing platform and not a CSS framework like Bootstrap or a website builder like Weebly, but I think having 2 or 3 columns of content on a page (or post) is really common enough that it might be worth considering. I’ve seen people here on the forum complain about not being able to wrap text around an image, and that would be one common problem solved by this. Drag and drop an image card, then drag and drop a text card beside it. Done.

But again, having said that, I really don’t know how difficult this would be to implement into Ghost’s codebase and I’m not the one doing the development work so I appreciate that it might not be a priority or something that the dev team is interested in adding. :slightly_smiling_face:

1 Like
6

Frameworks like Bootstrap are designed to be used to develop websites, or in the Ghost develop themes. Again wrapping text around an image comes with ramifications for different screen sizes. There’s a another thread talking about the same subject which was answered pretty well here: