CSS Grid Layout Gap Box Sizing

Question

I have a CSS grid that occupies 100% width and 100% height of a window (the body element has display: grid;). The grid has row and column templates and elements which occupy 100% of their allocated space. However, when I add a grid-gap to the grid, it makes the grid too large for the window, forcing scrollbars to appear. How can I stop the grid-gap from adding to the dimensions of the grid - similar to how box-sizing: border-box; stops padding from adding to the dimensions of an element? Instead, I want the gaps to shrink the cells of the grid.

Thanks.

4

Please add your code :) – Chris Happy Apr 27 '17 at 17:16

score 18 · Answer 1 · edited Nov 23 '22 at 10:12

When you use "fr" it works.

Example:

HTML:

<section>
    <article class="a">A</article>
    <article class="b">B</article>
    <article class="c">C</article>
    <article class="d">D</article>
</section>

SCSS:

section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: column;
    grid-gap: 20px;

    border: 10px solid blue;
    
    article {
        background-color: tomato;
        
        &.d {
            grid-column: 2; 
            grid-row-start: 1; 
            grid-row-end: 4;

            background-color: olive;
        }
    }
}

score 10 · Accepted Answer · edited Apr 28 '21 at 22:19

10

It works same as if you used box-sizing: border-box and padding as you can see in this demo. Height is set to 100vh and you can see that if you remove or add grid-gap there is no scrollbar, you just need to remove margin from body.

body {
  margin: 0;
}
.grid {
  display: grid;
  height: 100vh;
  grid-gap: 20px;
  background: #FF7D7D;
  grid-template-columns: 1fr 2fr; /* Use Fractions, don't use % or vw */ 
}
.grid > div {
  background: black;
  color: white;
}
div.a, div.d {
  color: black;
  background: white;
}

<div class="grid">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
  <div class="d">D</div>
</div>

edited Apr 28 '21 at 22:19

gtamborero

2,898
27
28

answered Apr 27 '17 at 17:43

Nenad Vracar

118,580
15
151
176

13

This worked when I used `fr` units as in your code instead of percentages. – Freddy Tuxworth Apr 27 '17 at 22:20
I was using vw units and ran into the same issue as the OP, but only on Windows Chrome (worked fine on Mac Chrome). Using fr units works well for me on both platforms. – Moby Duck Oct 05 '17 at 14:34

score 0 · Answer 3 · answered Apr 27 '17 at 17:27

You could use view-port units:

vw (1% of window's width)
vh (1% of window's height)

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 100%;
}

.first {  height: 40vh;  }
.hori {  height: 10vh;  }
.second {  height: 50vh;  }


div > div {
  float: left;
}

.left {  width: 40vw;  }
.vert {  width: 10vw  }
.right {  width: 50vw;  }

.first .left,
.second .right {
  background: #ccc;
}

.first .right,
.second .left {
  background: #000;
}

<div class="first">
  <div class="left"></div>
  <div class="grid-break vert"></div>
  <div class="right"></div>
</div>

<div class="grid-break hori"></div>

<div class="second">
  <div class="left"></div>
  <div class="grid-break vert"></div>
  <div class="right"></div>
</div>

CSS Grid Layout Gap Box Sizing

3 Answers3

Example: