Create custom grid layout with pages or tags

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, https://openai.com/jobs/
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

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:

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.

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>

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