Archived topic
Reduce space between dynamic grid items
3 replies · Started by Dmitrii on October 3, 2022
I've set up a 5-column grid that pulls in information dynamically for every post.
Everything works correctly, but the spacing/aesthetic looks really off on desktop.
I've tried adjusting the % for each column in the grid, but that doesn't look ideal either.
Is there a better method for styling it?
Hi there,
I don't think you need grid block for this layout, you can only use headline blocks for the texts, then enable the inline-width option for each of them:
https://docs.generateblocks.com/article/headline-overview/#spacing
You can use paddings to control the gap between each of them.
Let me know if this helps :)
Much better :)
I've put everything into a container element and set it to "Inline post meta items".
I then selected "Inline Alignment" -> "Space Between"
While it technically works, there is too much spacing now and no border between the items.
So what would be the best way to:
- Reduce spacing between elements
- Insert a border (or ideally a dot icon) to separate the elements visually
In the Spacing section, can you check the padding and margin values for the spacing?
Then, for the border, you can add a Border size to the right or left in the Spacing section as well.
