How do I create columns with query loop?

Hi,

Trying to make 2 columns with a single query loop. The idea is to list all categories under a certain parent category, and list it as cards in 2-3 columns.

No matter how I try i get it like this… like the query loop doesnt understand that it should continue in the second container but rather starts from the start of the list… if that makes sense?

Thanks!

You just need one container inside the parent container and then need to set width of the column. Read point 3 and you will figure it out. Customize the horizontal cards number in a query loop - How To - Bricks Community Forum (bricksbuilder.io)

1 Like

Not sure I get this… It still doesn’t work… and playing around with it trying to trial and error it to work but not managing!

Hi Erik,

The best thing to do is first just create the card. Do not worry about the query loop. Get the card styled and designed the way you want it. Then when you are happy turn it into a query loop. You will also need to wrap the query loop in a container if you want to use flexbox and set it horizontally.

Hi Erik,
There are a couple of ways to achieve this. Take a look at this template (created with Bricks 1.4beta), which uses max-width for the cards (32%, 48%, 100%) and flex-wrap: wrap and justify-content: space-between (to create a gap without calculating the column width).

Alternatively, you can of course use the technique omega mentioned in his link (which works for flex-basis, width, or max-width as well).

Best regards,
timmse

Thanks a lot! This was really helpful.

So… now I have gotten to this… the right categories displayed, in the design I want for the cards…

See all the boxes? I want them in 3 columns… how do I do that? Its wrapped in a container of course… Just have no idea how to set it up…

Thanks a lot!

Brilliant so the next thing to do is add a container (parent) and then move the query loop inside it. It might be worth turning off the query loop again when doing this.

Set the ‘parent’ container to direction:horizontal.
Then set the width of the query loop to 30%
I would also normally set the parent container to - align main axis: space between.

Then switch the query loop back on and have a look at the spacing to make sure its not to wide/narrow between the cards etc.

:+1:

Thanks so much Michael - you legend!

Now it ends up like this… hmm?

Ah sorry Erik, my bad! I forgot to mention to set the parent container to flex-wrap:wrap

See how that looks?

Thanks again Michael. Sitll doenst work… just line them up next to each other still… Thanks a lot mate!

Hi Erik,

I just quickly set one up for you in a video - it might be easier for you to follow :slight_smile:

2 Likes

I believe this video from @Michael should go into Bricks documentation / faq for users to understand.

Sorry to interrupt but I think you over complicate things in this video.

One container is enough to achieve any particular design:

  • container: flexbox with wrap option or CSS grid;
  • div, card, or any element (including containers, of course): check query loop and set a max-width if using flex (grids don’t even need this), and that’s it :slight_smile:

Using an intermediary container brings complexity in design and future CSS rules.