Centering Cards in a Layout Grid

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?   
2 answers

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


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