Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS Grid: Is it possible to apply color to grid gaps?

Tags:

css

css-grid

Is there a way to style more than just the width of the grid gaps within the CSS grid layout module? I can't find anything about it in the documentation, however one would tend to think that it would be possible as grid gaps tend to be colored in many designs. If it is not possible, is there a workaround?

like image 797
Taishi Avatar asked Aug 25 '17 15:08

Taishi


People also ask

How do I fill space in CSS Grid?

Just use width: 100% and height: 100% in the CSS class of the item you want to fill the grid. Join a max-width property and a max-height property if you don't want a grid item inside a grid container to grow more than some size.

Is CSS Grid gap deprecated?

'grid-gap' has been deprecated in favor of 'gap'. In a similar vein 'grid-row-gap' and 'grid-column-gap' have been deprecated in favor of 'row-gap' and 'column-gap'. Unfortunately, the new features aren't recognized by Visual Studio yet either. As far as May 2020, 'grid-gap' is shown as "Obsolete" in VSC.


1 Answers

Sadly, there is currently no way in the CSS Grid spec to style grid-gap. I came up with a solution that works well though that involves just html and css: show border grid lines only between elements

like image 130
eriklharper Avatar answered Sep 22 '22 18:09

eriklharper