title: CSS Grid Layout Gap Box Sizing
body: <p>I have a CSS grid that occupies 100% width and 100% height of a window (the body element has <code>display: grid;</code>). The grid has row and column templates and elements which occupy 100% of their allocated space. However, when I add a <code>grid-gap</code> to the grid, it makes the grid too large for the window, forcing scrollbars to appear. How can I stop the <code>grid-gap</code> from adding to the dimensions of the grid - similar to how <code>box-sizing: border-box;</code> stops padding from adding to the dimensions of an element? Instead, I want the gaps to shrink the cells of the grid.</p>
  
  <p>Thanks.
  <a href="https://i.stack.imgur.com/pnTCY.png" rel="noreferrer"><img src="https://i.stack.imgur.com/pnTCY.png" alt="like this"></a></p>