Centering Cards on a Grid

[chet]

I’m trying to display 5 cards (from Elements Essentials) across two rows. I want 3 cards in the first row, and 2 cards in the second row. I want all cards to be the same size, and I want the second row centered.

I’ve got the cards laid out in two separate Grid components (1 for each row).

What is the correct way to get the second row centered?

[MichaelDroste]

I would do different containers and different settings

Leave the first, drop a new container for the two card section - then insert two cards

[chet]

I have that set up right now, the trick I haven’t figured out is how to center the 2x1 grid while maintaining the same size cards as the 3x1 grid.

[MichaelDroste]

Sorry not at the computer to see settings…

[Pegasus]

take a look @ this video.

Laying out content using the Flex Component

i hope this helps

[chet]

It’s certainly helpful, but I’m still not sure how to preserve the card size so that it’s the exact same between the two rows.

Here’s a link to the project file, if that’s helpful. (Removed after problem solved)

The most important thing is that the cards are all the same size.

[jenkman (Steve Jenkins)]

try this. put it together fast so no settings for mobile. Set the grids to 6 wide and the grid containers to 2 wide for the three cards. the second grid same 6 columns wide and grid container 1 and 4 are 1 column wide

elementsapp://downloadDocument/Uu6q7PrbE7kg

[dan]

I think what you want to do is set your grid to six columns, and your cards to two columns.
That way you can nudge the second row along to start at 1 column in. It’s hard to explain, so I recorded a quick video…

Here’s a screenshot and a copy of the project Open Project in Elements

[jenkman (Steve Jenkins)]

exactly what I uploaded also.

[dan]

This is interesting, because it’s not the same… my solution is a little cleaner. Notice how I only use a single grid

[chet]

Thank you, all!