Centering Cards in a Layout Grid

0
I feel like I may be missing something simple, but I can’t get the presentation correct for these action cards I am trying to center on the home screen of my application. I need to center four action cards along one row of the screen, with a reduced screen size causing them to stack on top of one another. I tried the layout below, and it gets very close. The problem is that a space forms on the right hand side of the card layout when the cards need to stack on one another. The central Auto-fit content column doesn’t get reduced in size when the cards drop down, and I can’t figure out how to center the inner layout grid not matter what options or styles I use.  Any tips to make this work?   
asked
2 answers
1

Hi Esteban,

If I understand correctly, you always want to center your cards, also when they wrap around to a new line? If you try the below set-up, while adding to the layoutgrid row the following styling:

justify-content: center;

You will get the following results:

You can also use space-evenly or space-around for some different arrangements, if that suits you better. Documentation about this can be found here. Hope this helps

answered
1

Hi Esteban,

 

Please follow below steps to get page where cards will be centered.

 

  1. Add a layout grid in a page

  1. Edit the layout grid to have 3 columns

   3. Change the first and second column desktop width to Manual and desktop -size to 3

  1. In second column , add 2 layout grid with 2 columns

  1. Add your respective cards in 4 columns which is in center column.

Output will be 

answered