Why CSS grid gap affects fr unit?

Question

Prepare

<div class="g">
  <div>a</div>
  <div>b</div>
  <div>c</div>
  <div>d</div>
  <div>e</div>
  <div>f</div>
</div>

.g {
  display: grid;
  grid-template-areas:
    "a e"
    "b e"
    "c e"
    "d f";
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 1fr 1fr 1fr 3fr;
}
.g > div:nth-of-type(1) {grid-area: a; background: red;}
.g > div:nth-of-type(2) {grid-area: b; background: orange;}
.g > div:nth-of-type(3) {grid-area: c; background: yellow;}
.g > div:nth-of-type(4) {grid-area: d; background: green;}
.g > div:nth-of-type(5) {grid-area: e; background: blue;}
.g > div:nth-of-type(6) {grid-area: f; background: purple;}

https://jsfiddle.net/ghbz9osy/

The section e(blue) and f(purple) are the same height, which is expected.

Issue

https://jsfiddle.net/ghbz9osy/1/

If I add the gap: 10px it will not be the same height.

Question

As I know, gap should works fine with *fr.

Why when I add gap will break that?

Note

Currently my solution is to wrap a,b,c sections into another grid.

But I want to know why above version not works.

https://jsfiddle.net/ghbz9osy/2/

Answer 1

fraction takes the remaining space (space after paddings of the grid container and gap). Therefore the gap is never calculated. If an element spans multiple rows or columns, it must also span the gap with it.

What you can do about it is to let the purple element span 3 rows instead:

.g {
  display: grid;
  grid-template-areas:
    "a e"
    "b e"
    "c e"
    "d f"
    "d f"
    "d f";
  grid-template-columns: 1fr 2fr;
  grid-auto-rows: 1fr;
  gap: 0.5em;
}
.g > div:nth-of-type(1) {grid-area: a; background: red;}
.g > div:nth-of-type(2) {grid-area: b; background: orange;}
.g > div:nth-of-type(3) {grid-area: c; background: yellow;}
.g > div:nth-of-type(4) {grid-area: d; background: green;}
.g > div:nth-of-type(5) {grid-area: e; background: blue;}
.g > div:nth-of-type(6) {grid-area: f; background: purple;}

<div class="g">
  <div>a</div>
  <div>b</div>
  <div>c</div>
  <div>d</div>
  <div>e</div>
  <div>f</div>
</div>