Create custom grid layout with pages or tags

Themes
1

Hi there. New to Ghost but i really like it already :slight_smile:

My question is how to show “blocks” of content on ex index page, similar to the 3rd section on this openai page, Join OpenAI
I mean the block with the three images with their own text block.
Is it best to create a tag, ex index-grid, and list this tag?

I tried to create custom pages from the tutorial and i got that working but it will probably be a bad idea/hard to choose what part of the page to show in each block.

1 Like
2

Hi there @roberthaugen. Is the page you’re trying to produce a custom layout? And do you know if it will be changed often? Depending on the frequency of editing will depend on how you build the page. You could make the blocks static if they don’t need to be changed all that often :slight_smile:

3

Hi @DavidDarnes. Yeah, i am trying to create a custom layout. As i mentioned, i am new to Ghost and like it but i couldn’t find any themes that use a “regular website” layout, but a blog layout.
The blocks will not be changed that often but its for a potential customer so they want to be able to change the text, images etc in the blocks themselves.

4

Thanks for the extra info @roberthaugen. I’d be inclined to find out from the customer if they would be editing that area at all. In my past experience the client will often ask the me, the developer, to update the content in layouts like this. However there is a way to achieve this layout within the Ghost editor using the HTML card. I threw together this very simplified piece of code using CSS Grid which sets out the 3 columns which then scale down to a single column on smaller screens:

<ul
    style="
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
           grid-gap: 3rem;
           list-style: none;
           padding: 0;
           margin: 0;
    "
>
	<li>
		<img src="https://images.unsplash.com/photo-1558979158-65a1eaa08691?&w=800&q=80" alt="">
		<p><strong>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</strong> Et, praesentium! Laboriosam sapiente similique sit eligendi officia consequatur vero at numquam culpa commodi quas labore atque quo ipsa incidunt, repellendus debitis.</p>
	</li>
	<li>
		<img src="https://images.unsplash.com/photo-1558979158-65a1eaa08691?&w=800&q=80" alt="">
		<p><strong>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</strong> Et, praesentium! Laboriosam sapiente similique sit eligendi officia consequatur vero at numquam culpa commodi quas labore atque quo ipsa incidunt, repellendus debitis.</p>
	</li>
	<li>
		<img src="https://images.unsplash.com/photo-1558979158-65a1eaa08691?&w=800&q=80" alt="">
		<p><strong>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</strong> Et, praesentium! Laboriosam sapiente similique sit eligendi officia consequatur vero at numquam culpa commodi quas labore atque quo ipsa incidunt, repellendus debitis.</p>
	</li>
</ul>
5

Ah yes. Thanks for the code/suggestion but it wont be a solution that the customer is happy with :slight_smile:

6

Hi @DavidDarnes Thanks for this, this is almost exactly what I have been searching for. I was wandering if you know how to make 2 adjustments to the code you have provided.

  1. On smaller screens like mobiles, 1 column is perfect, but on larger screens I only want 2 columns, not three. Is that possible?

  2. Do you know how I can edit the width/margins so that when on desktop it isn’t spread across the entire screen but is inline with the rest of the content?

Articles: Everything I've written to this date here is an example of what I am looking for, the grid with the 2 columns.

Thanks for your help

7

Changing column count on mobile can be done with media queries, but that will require more specific CSS work. As for the gap between columns you can change the 3rem to whatever column width you desire :+1:t2: