title: CSS Grid: fr and percentage unit difference
body: <p>I was looking at this question: <a href="https://stackoverflow.com/questions/45090726/the-difference-between-percentage-and-fr-units-in-css-grid-layout">The difference between percentage and fr units in CSS Grid Layout</a> and understood that <code>fr</code> works for free space in the container. And I tried checking it which causes a confusion.</p>
  
  <p>In this <a href="https://codepen.io/asim-coder/pen/JMdPoR" rel="nofollow noreferrer">pen</a> both <code>%</code> and <code>fr</code> acts like entirely same.</p>
  
  <p><a href="https://i.stack.imgur.com/MEWGg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MEWGg.png" alt="Screenshot of &lt;code&gt;fr&lt;/code&gt; and percentage in CSS grid"></a></p>
  
  <p>In a code like below:</p>
  
  <pre><code>main {
      width: 1000px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      // grid-template-columns: repeat(3, 33%);
  }
  </code></pre>
  
  <p>I was under the impression that:</p>
  
  <ol>
  <li>If you try <code>33%</code> the container will split into 3 equal parts regardless of length of the content of each grid item (which is working as expected.)</li>
  <li>If you try <code>1fr</code>, each grid item will get <strong>the exact same portion of the free space</strong> (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.</li>
  </ol>
  
  <p>But in each case, I'm getting the same width. Why?</p>
  
  <p><a href="https://codepen.io/asim-coder/pen/JMdPoR" rel="nofollow noreferrer">https://codepen.io/asim-coder/pen/JMdPoR</a></p>