Post grid personalization

[Andre]

Hi!

I´d like to insert some lines and spaces dividing the post grid block, but I´m not a advanced user and it´s too hard to me to aplly the correct CSS.

My personalized block, for now, is:

selector {font-size: 90%;

background: #f5f1ec;

border: 0px solid #8b4500;

position: center;

}

What could I add to have a good view of this block, with the cells separated by a padding (gap) and lines like this: https://cdn3.wpbeginner.com/wp-content/uploads/2016/02/postgridlayoutexample.jpg

Thank you!

[Alexis]

HI @viagemlenta ! Do you have a link to a page where you used the post grid block? With it, recreating the effect you wanted on your page would be easier, and we’d be able to take into account possible style conflicts when writing the custom CSS code.

[Andre]

Hi Alexis!

Yes, check https://viagemlenta.com/futuro-do-movimento-fire-com-a-queda-nos-mercados/ at the bottom of the page.

The recent posts (“Artigos mais recentes”) appear in a 4×4 grid, but without a “gap” in a differente color. I´d like to offer something more beautiful, like the image I posted above.
Could you to suggest a CSS lines to add in the appropriate field of the block?

Thank you!

[Alexis]

Hi @viagemlenta ! Upon checking your page, I noticed that you’re using the default Latest Posts block. I’d recommend switching to Post Grid from Ultimate Blocks if you want to exclude the current post from the list being shown. However, the needed custom CSS codes to achieve your desired effect with any of the two differ very little. Either way, you’ll need to ensure that each cell would have an ample margin from each other.

If you keep Latest Posts, here’s the code you’ll need:

.wp-block-latest-posts.is-grid > li {
    margin: 10px;
    background-color: #ffffff;
}

.wp-block-latest-posts.is-grid{
    background-color: #0088aa;
}

On the other hand, if you decide to switch to our Post Grid block, here’s what you’ll use:

.ub-post-grid-items.is-grid > article {
    margin: 10px;
    padding: 10px;
    background-color: <slot>#ffffff</slot>;
}

.ub-post-grid-items.is-grid {
    background-color: <slot style="font-size: 1rem;">#0088aa</slot>;
}

For both of them, you may adjust the background-color, margin, and padding values to better match your page theme.

Please let us know how it goes.

[Andre]

Hi Alexis! Thank you so much for your help.

I really got confused. I use the Ultimate Blocks “Table of contents” and “How to”, but not the “Post Grid”. Sorry.

I have tried, however, both alternatives. The first worked well. Thanks.

But with Ultimate Bloks, no.

I had an error and WordPress returned an “unexpected token” <” on a given line.

But okay, I’ll keep it the way it is. I really appreciate your help.

Thank you again.