CSS Grid - Why there is a leftover space when fr units are less than 0.15?

Question

While defining a CSS grid layout, I happened to define the grid rows as follows i:

grid-template-rows: repeat(7, 0.14fr)

This led to some confusing behavior, where the grid refused to distribute the remaining space fully; instead, there was some leftover space right at the end.

I tried the same thing, but using columns this time:

grid-template-columns: repeat(7, 0.14fr)

This resulted in the same behavior. Next, I changed the values as follows, increasing the 0.14fr to 0.15fr:

grid-template-rows: repeat(7, 0.15fr)

This made things alright again. Just to make sure that it wasn't issues on my side that was making things weird, I set up the same situation in Codepen: Weird CSS Grid - pen.

As the problem repeated itself, I opened up Codepen on Chrome to see if it was browser-specific: it wasn't. The same thing happened again. I've attached the bare-bones code of what I've been trying to do below, with the fr units set up to be 0.9fr, just to make the difference clearer.

.box {
  display: grid;
  height: 80vh;
  width: 400px;
  margin-right: 50px;
  box-sizing: border-box;
  background-color: black;
  border: 1px solid red;

  /* ----------  Weird stuff starts here ---------- */

  /*   grid-template-columns: repeat(7, 0.15fr); */
  grid-template-rows: repeat(7, 0.09fr);

  /* ----------  Weird stuff ends here ---------- */

}

.box .temp:nth-child(even) {
  background-color: white;
}

.box .temp:nth-child(odd) {
  background-color: cornflowerblue;
}

Is this a bug, a machine-specific issue, an innocent little quirk, just how CSS-Grid works and calculates fr units or is this a browser-specific issue?

Note:

My primary browser is Firefox, but I've tried replicating this in Chrome too.

Since the browser calculates the widths of the fr on-the-go, there might be a chance that this might be reproducible only on my machine. (I think? Not sure.)

This might be a fringe case, I agree. Why define fr units using smaller numbers like below when I can just use numbers bigger than 0.15, or 1, really? I only came across this problem (quirk?) when I just typed in the fractional values of a layout; I worked out the fr values by dividing the pixel lengths of the child elements by the pixel length of the parent container, which obviously works out to be lesser than 1.

I used CSS rather than SASS in the pen, since I thought maybe the SASS pre-processor might be doing something weird behind the scenes (far-fetched, I know, but I didn't want to take the chance.)

The breakpoint between 0.14fr and 0.15fr might be specific just to my machine.

Temani Afif · Accepted Answer

When defining repeat(7,0.14fr) it means that you will take from the grid 7*0.14fr = 0.98fr. Note how you are missing 0.02 to have the 1 and this is the space you are missing.

When defining repeat(7,0.15fr) it means you will take 7*0.15fr = 1.05fr. In this case you are covering all the area and even more but there is no more.

From the specification:

Each column or row’s share of the leftover space can be computed as the column or row’s * / .

Note: If the sum of the flex factors is less than 1, they’ll take up only a corresponding fraction of the leftover space, rather than expanding to fill the entire thing. This is similar to how Flexbox [CSS-FLEXBOX-1] acts when the sum of the flex values is less than 1.

If we have a sum less than 1 then each item will take the correspending space. In the first case it's 0.14fr (0.14* Height) and when the sum is bigger than 1 we apply the formula and in this case whataver the value you will be using in repeat(7,x) you will have:

(x/7*x) * Height = Height/7

Basically, you simply divide by 7.

In your case you have two ranges: from 0 to 1/7 = 0.1428.. where you will have missing space. Then above 1/7 where you will not:

.box {
  display: inline-grid;
  vertical-align:top;
  height: 100px;
  width: 100px;
  box-sizing: border-box;
  background-color: black;
  border: 1px solid red;
  grid-template-rows: repeat(7, var(--x));


}

.box .temp:nth-child(even) {
  background-color: white;
}

.box .temp:nth-child(odd) {
  background-color: cornflowerblue;
}

CSS Grid - Why there is a leftover space when fr units are less than 0.15?

Answers (1)

Related Questions