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.
5 Replies
I’m not understanding the issue. With your normal padding, the buttons look fine. Put a flex on the row w the pills w flex-wrap?
Also why use a span inside of an a tag?
And using the grid inspector in the dev tools can help you visualize all the grids
And see if any of the properties aren’t being applied
Thanks, those are some really good ideas and give me some ideas on where to go next. I will experiment a little with flex on the row. I hadn't thought of doing that.
Now you mention it I should be using a DIV for that, I should read up on when it's best to use span.
The issue was that the alignment was looking a bit off and I dont like "magic" numbers because it limits options further down the road.
I mean why would you not just style the <a> tag itself ; why include a span or a div or anything inside.
If I’m gleaning the intention of these elements correctly , I’m wondering if they should actually be
<button> tags not <a> tags. Does the pill navigate to another page with “Enid glovers” contact info (for example) or does it trigger something to happen like adding Enid to contacts or opening phone app/email etc ?I would say, honestly that one is a noob mistake. Styling the
<a> makes a lot more sense now you say it and thinking I really had over complicated it! The pill does navigate to another page. When clicked on it goes to the customer profile showing details about them. So think in this case <a> is probably the right tag.Just to update, I implemented your suggestions @hart❤🔥 .
The flexbox fixed the issue with the padding overflow problem, the span was totally unnecessary so replaced with a single
<a> tag and styled that instead.
For anyone interested I have added another codepen with the better code which now does what I inteneded.
https://codepen.io/enlivenmike/pen/BaMeemV