Creating Collections for a single page

Using Ghost
21

Thank you for all the assistance you provide this community. I am new to Ghost and do not have a web development background. I do consider myself “tech savvy” and can usually fumble my way through the syntax to achieve my desired result.

In this case I would like to create a grid layout of images with links to individual tag pages as a type of collection. I followed your post description and created a new page titled “Topics” and added both HTML code blocks as you have them, with my (6) separate images between both HTML code blocks in the page editor. When I publish the page I do get a grid view with three columns and in this case two rows, but the first image (upper left) is always slightly higher than the other two images in the first row. Is there something I am missing that may be causing this? Below is a screenshot of the published page.

image
image2478×1224 111 KB

Any advice is greatly appreciated!

22

You’re really close! I think there’s some css that changes the padding or margin on the first element. Use dev tools to inspect the first image and the container it’s in - you’ll probably find a selector with :first. You’ll need to set the padding/margin for that selector to match the others.

23

Thank you so much for the quick advice. I was able to inspect the element and noticed it showed the following.

  .kg-gallery-card,.kg-image-card {
    --gap: 1.2rem

I added the following to the second HTML block on my page.

  .kg-gallery-card,.kg-image-card {
    --gap: 0rem

That appears to have solved the alignment issue on the first image in the upper left.

Many thanks again!

1 Like