Centering card in grid cell

Configuration Frontend
1

Hi,

I am stuck with a problem with my Lovelace UI. I have a grid which looks like the following.

Capture

It consists of a grid with 4 columns containing custom button cards. What I am trying to do is get the 2nd row with a single button to be centered below the first column and for the button to be the same size as the buttons in the first row.

If I make the 2nd row 3 columns and place the single button in the 2nd grid cell the button is sized to fill the column width and height.

If use the Styles attribute on the custom button card a set the width and height to be what I want, the card resizes correctly but it is left justified within the grid cell and not centered.

Any idea s on how this can be achieved?

1 Like
2

Iā€™m just thinking aloud, but maybe you could use a grid consisting of 8 columns, span every card in the first row over 2 columns. That way you should be able to place the card in the second row in columns 4 and 5.

3

Could be an option but I am not sure how to span a card over multiple columns.

4

Alternatively you could use a grid card in custom_fields.

5

Managed to solve it by using a horizontal-stack with 3 columns for the 2nd row instead of a grid. Thanks for the suggestions.

1 Like