Kevin Powell - Community•2y ago

CSS Grid column bg colour (when using gap)

I want to produce a table using CSS grid as that is much easier to make responsive. If I use gap as I want to avoid item padding/margin, can I still colour the background of an entire column or row? Or do something like lines separating every row? The gap property, no matter how useful, seems to break this. I'd not like to resort to an actual html table if possible. Thanks for any thoughts.

1 Reply

posix•2y ago

Okay I've since worked out you can hack in lines with sth like this

grid-column: 1 / -1;
height: 2px;
background-color: darkgrey;
width: 100%;

grid-column: 1 / -1;
height: 2px;
background-color: darkgrey;
width: 100%;

Not pretty, but something

Gaming

Programming

CSS Grid column bg colour (when using gap)