Grid Cell Problems

I am having some problems getting my grid cells to work as I want.

code here: https://codepen.io/FrostyJack/pen/LKmmXz

The bg colors are not filling the entire cell, they only cover the content.

Also, the spans don’t render if they have no content, which is a problem as the first and third columns will be used for spacing and will always be empty. I suppose I could use the   trick, but that seems a bit hacky.

I also don’t want the last row to stretch vertically to fill the container. I want all rows to be fixed at 50px height.

The problem I am thinking ahead about is that I don’t know how many rows will be in the sidebar, it will change dynamically depending on what else is going on in the app. Sometimes there might only be 4 rows in the sidebar, sometimes 10, sometimes a different number.

to address the last two points (wanting a fixed height for each row, but not knowing how many), you can still use the repeat for that:

grid-template-rows: repeat(auto-fill, 50px);

And to address the first two points, the background doesn’t fill and the spans not rendering if they have no content? on the span css, explicitly set them to a width of 100%. Looked like it worked from my house.

1 Like

Is there anyway to keep the content centered, too?

(update with your changes) https://codepen.io/FrostyJack/pen/LKmmXz

Got it. Just needed to add justify-content: center;