CSS Grid: fr and percentage unit difference

Question

I was looking at this question: The difference between percentage and fr units in CSS Grid Layout and understood that fr works for free space in the container. And I tried checking it which causes a confusion.

In this pen both % and fr acts like entirely same.

In a code like below:

main {
    width: 1000px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    // grid-template-columns: repeat(3, 33%);
}

I was under the impression that:

1. If you try 33% the container will split into 3 equal parts regardless of length of the content of each grid item (which is working as expected.)
2. If you try 1fr, each grid item will get the exact same portion of the free space (divided by three in this case) available after the content's length in the width of the container. ie, the middle will get more space because it will get the portion from left and right parts.

But in each case, I'm getting the same width. Why?

https://codepen.io/asim-coder/pen/JMdPoR

Answer 1

The reason both of them are the same is because you aren't using any static values for any of the columns and only using percent and fr exclusively. If you were to use a column with a width of 100px the results will be different, because 33% will stay 33%, but 1fr will use up all of the free space (which in this case would be 66%-100px).

main {
  width: 900px;
  display: grid;
  grid-template-columns: 1fr 33% 100px;
  // grid-template-columns: repeat(3, 33%);
}

// Styles for fun
// -------------------------------------------------
@import url('https://fonts.googleapis.com/css?family=Scope+One|Open+Sans:700');
body {
  background: #fff;
  color: rgb(113, 115, 136);
  font-family: 'Scope One', sans-serif;
  font-size: 1rem;
  line-height: 1;
  margin: 1rem;
}

main {
  background: #444;
  border: 3px solid #444;
  grid-gap: 3px;
}

div {
  background: #fff;
  padding: 1.5vw 2vw;
}

h1,
h2 {
  margin: 0;
}

h1 {
  color: rgb(113, 115, 136);
  font-size: 1.5rem;
  font-weight: 700;
  padding-top: .5rem;
}

<main>
  <div>1fr (longer, width is 66%-200px)</div>
  <div>
    33% (shorter, width is 33%)
  </div>
  <div>100px</div>
</main>

Another thing to note is that fr is not restricted to adding up to 100. If your percentage values go above 100, things aren't going to work. With fr on the other hand you can combine as many as you like.

main {
  width: 900px;
  display: grid;
  grid-template-columns: 33% 33% 66%;
  // grid-template-columns: repeat(3, 33%);
}

main.another {
  width: 900px;
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  // grid-template-columns: repeat(3, 33%);
}

// Styles for fun
// -------------------------------------------------
@import url('https://fonts.googleapis.com/css?family=Scope+One|Open+Sans:700');
body {
  background: #fff;
  color: rgb(113, 115, 136);
  font-family: 'Scope One', sans-serif;
  font-size: 1rem;
  line-height: 1;
  margin: 1rem;
}

main {
  background: #444;
  border: 3px solid #444;
  grid-gap: 3px;
}

div {
  background: #fff;
  padding: 1.5vw 2vw;
}

h1,
h2 {
  margin: 0;
}

h1 {
  color: rgb(113, 115, 136);
  font-size: 1.5rem;
  font-weight: 700;
  padding-top: .5rem;
}

<h1>Broken</h1>

<main>
  <div>33%</div>
  <div>
    33%
  </div>
  <div>66%</div>
</main>

<h1>Works just fine</h1>

<main class="another">
  <div>1fr</div>
  <div>
    1fr
  </div>
  <div>2fr</div>
</main>