Paged breaks grid CSS

Loops & Logic
#1

Hello, I’ve used this tutorial to create a grid for a Loop and it works nicely if I use

<Loop type=post orderby=date order=desc count=6>

But if I try to paginate the loop with <Loop type=post orderby=date order=desc paged=6>, the grid presentation is broken.

#2

Hi Jean-Michel,
The short answer is that pagination adds an extra wrapping div to your output, and so that new div is your grid item instead of the actual posts. See this thread for solutions.

Your wrapper CSS should probably be changed to look like this:

.cards, .cards > .tangible-paginator-target {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
#3

Thanks a lot Julia.
By the way, I read the post you mention before trying this code and could not make your own code to work (very frustrating). I don’t know why. It may be interesting to write in the documentation an example of CSS for a simple grid rendering for noobs like me.

#4

@julia I tested your css again… and now it works. Mystery.

2 Likes