Display CSS grid lines

I have a grid like this:

<div class='grid'>
    <div class='grid-item'>some content</div>
    <div class='grid-item'>some content</div>
    <div class='grid-item'>some content</div>
    <div class='grid-item'>some content</div>
</div>

basically the content inside each grid cell doesn’t take up the total amount of space in each cell, but what I’d like to do is show the grid lines almost like a border. I was wondering if this is possible, I can’t find any info about it from googling.
Thanks

You can add a border to each of the grid-item something like

border : 2px solid red;

I don’t have all of the sub divs with a class of .grid-item so I tried targeting them with .grid > div selector but the issue is that each element in a grid cell doesn’t stretch to fit the cell top to bottom so the borders are very irregular.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.