1.3.7beta How to make a grid of looped posts?

How To
1

Must be missing something here, but How do I create a grid view of posts created using the Custom Loop?
I can make a single column, ie list view easily. But not a full grid view that would adjust to the screen size.

Basically I was hoping to have the Posts element and its Grid options but being able to fully customise each card. Maybe by having a Bricks Template for the loop items.

Thanks
Alan

2

Wrap Loop container with another container. Set width to Loop container, set direction to row for wrap container and flex wrap to wrap…
image

3

Thanks. That works although seems to be much harder work than necessary.
Why not just add the Content Layout section from the Posts element to the Loop Query setting?
That makes life much easier when choosing different grid layouts - change to 6 columns and everything shuffles around to match. Easy.

4

Hi Alan,
Because then, we would have built a second posts element :wink:

If you want to keep it simple, you can continue to use the Posts element. However, the query loop gives you complete freedom as to the layout of your loop - and that’s the point. So you can build whatever you want from scratch without the need to write custom CSS and/or to override the posts element, which makes it so powerful.

Even if something like this is possible with the posts element (and a lot of custom CSS to override the defaults), it is possible with a single line (for the text stroke) of custom CSS now.

Best regards,
timmse

5

Hmmm, I’m sure you are right but it appears beyond me. I just can’t make the query loop items look as I want. Each item is different with images different sizes and text alignment off.
Guess I’ll stick with the Posts Element. Managed a few workarounds to at least make it look consistent even if not exactly what I’d prefer. But close enough.
Cheers
Alan

6

That looks great, @timmse! Seen it from you on the FB group too.

Any chance you’ll do a tutorial/walkthrough of how you built it?

7

Hi Dean,
Thank you! Yes, I’m planning something bigger right now, that will include tutorials among other things… but still takes some time :sunglasses:

2 Likes
8

Oooh please can you also include how to do the simple grid as shown in @thomas beta announcement? Pretty please.

9

Probably Thomas will do that soon - but if not, sure!

10

When display:grid for container is available then, it should make things much easier.

1 Like