CSS grid-gap "trick"

was futzing with a container div full of grid-template-areas. I wanted to get the child divs off the far edges in an amount equal to the “grid-gap” properties I’d set. You can do that with padding on the container but out of curiosity I tried this and it worked just as well:

  grid-template-columns: 0px 300px 1fr 300px 0px;

Grid-gap doesn’t “do” the outer edges, just inners, but a column of no-width will still generate the gaps. Shmeazy.

(Quick search of Stack Overflow suggests this is sometimes answered with “add padding on container” but that sometimes makes other messes. I also see people using grid without area-names, and this would only work in that case if you added useless html to account for the 0-width content. Not an issue with my named areas.)

This entry was posted on March 08, 2019 with tags