Images and titles were also not aligned properly, this is my final css that solves the problem in case anyone else also has problem.
.display-posts-listing.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 10px;
grid-row-gap: 15px;
}
.display-posts-listing.grid .title {
display: block;
margin-left: auto;
margin-right: auto;
}
.display-posts-listing.grid img {
display: block;
max-width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 5px;
}
Similar problem, but I can’t get your CSS to work. What structure does navigator show for the parent elements of your short code?
The CSS works ok – the problem was that I didn’t set the featured image. Duh.
There are however annoyingly large gaps between adjacent columns of the grid that I can’t seem to shrink even with your suggested CSS. This may be a problem with the formatting of the posts themselves though.
Hi this is my final code. You can change grid-row-gap and grid-column-gap values for space between rows and columns.
.display-posts-listing.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-row-gap: 25px;
grid-column-gap: 15px;
margin-bottom: 5px;
margin-top: 10px;
}
.display-posts-listing.grid img {
display: block;
max-width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 5px;
}
.display-posts-listing.grid .title {
display: block;
text-align: center;
font-size: 22px;
}
Thanks – greatly appreciated.
