7 replies

Having issues with padding overflow in CSS grid display

Hi,

I am having some issues with a grid layout I am working on. I am using subgrids to even out column widths when there are multiple columns of different widths. (I use the same layout for multiple pages)

I have a pretty standard table style layout with details about addresses and links to contacts associated to the address. The problem I am having is that the padding on the contacts is overflowing.

This is a codepen of what I have so far: https://codepen.io/enlivenmike/pen/KKJLvJx

I have exaggerated the padding on the contacts to show the problem more clearly.
What I would like to happen is for the contact "pills" to fit in the row and for the second row of the item to expand to fit the "pills". There could be any number of contacts so it will be important for the contacts to wrap when too many to fit the line.

Does anyone know what is causing this overflow or if there is a way to make the grid layout take the padding into account. I have ensured border-box is set but this had no effect. I have tried changing grid-template-columns and grid-template-rows with other tweaks with no luck.

Thanks in advance.