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

css css-grid
Taishi picture Taishi · Aug 25, 2017 · Viewed 44.6k times · Source

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?

Answer

eriklharper picture eriklharper · Dec 20, 2017

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

Related questions

Centering in CSS Grid

I'm trying to create a simple page with CSS Grid. What I'm failing to do is center the text from the HTML to the respective grid cells. I've tried placing content in separate divs both inside and outside of the …

Read More
force css grid container to fill full screen of device

How do I force a css grid container take the full width and height of the device screen for a single page app? Modified example is from Mozilla: Firefox documentation I'm not sure what to do to get this code …

Read More
CSS Grid Layout not working in IE11 even with prefixes

I'm using following HTML markup for my grid. <section class="grid"> <article class="grid-item width-2x height-2x">....</article> <article class="grid-item">....</article> <article class="grid-item">....</article&…

Read More