title: Calculating the actual length of fr units
body: <p>I'm asking here because I suck at maths. </p>
  
  <p>Assuming that the grid size would be 1920px, and I'm not using explicit sizing.</p>
  
  <p>How many fr's would be ie. 1200px ? And how I can calculate it ?</p>
  
  <pre><code>.grid {
    display: grid;
    grid-template-columns: 1fr 3.3335fr 1fr;
  }
  </code></pre>
  
  <p>The spec says:</p>
  
  <blockquote>
    <p><a href="https://www.w3.org/TR/css3-grid-layout/#algo-find-fr-size" rel="nofollow noreferrer"><strong>12.7.1. Find the Size of an <code>fr</code></strong></a></p>
    
    <p>This algorithm finds the largest size that an fr unit can be without
    exceeding the target size. It must be called with a set of grid tracks
    and some quantity of <strong>space to fill</strong>.</p>
    
    <ul>
    <li>Let <strong><em>leftover space</em></strong> be the space to fill minus the base sizes of the
    non-flexible grid tracks. </li>
    <li>Let <strong><em>flex factor sum</em></strong> be the sum of the flex factors of the flexible tracks. If this value is less than 1, set it to 1 instead. </li>
    <li>Let the <strong><em>hypothetical fr size</em></strong> be the leftover space divided by the flex factor sum.</li>
    <li>If the product of the hypothetical fr size and a flexible track’s flex factor is less than the track’s base size, restart this algorithm treating all such tracks as inflexible.</li>
    <li>Return the hypothetical fr size.</li>
    </ul>
  </blockquote>
  
  <p>They mean that the "hypothetical fr size" would be for the unit (1fr) ? I guess so</p>
  
  <pre><code>1920/(1+3.3335+1) = 359.988750352 &lt;-- The hypothetical fr size
  359.988750352 * 3.3335 = 1200.0224993
  </code></pre>
  
  <p>So I guess that's a way to get how many pixels are n fr value. </p>
  
  <p>But, what if I want to do the reverse, which would be the proper way/correct formula to calculate how many fr's would be 1200px ?</p>
  
  <hr>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>Here's a live example, of what I was doing. The <code>minmax(min, max)</code> helped me a lot. I've solved some overflowing errors. And figured out how I can use rem units in grid template tracks but still benefit from shrinking :D</p>
  
  <p><a href="https://codepen.io/jeflopo/pen/OmZBEJ" rel="nofollow noreferrer">https://codepen.io/jeflopo/pen/OmZBEJ</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/**********************************/
  /* BODY - THE MAIN GRID CONTAINER */
  /**********************************/
  /**********************************/
  /* DEFINING GRID AREAS            */
  /**********************************/
  .header {
    grid-area: header;
  }
  
  .navigation {
    grid-area: nav;
  }
  
  .main {
    grid-area: main;
  }
  
  .posts {
    grid-area: posts;
  }
  
  .sidebar {
    grid-area: sidebar;
  }
  
  .footer {
    grid-area: footer;
  }
  
  /**********************************/
  /* HOW HAS GRID AREAS TO BEHAVE ? */
  /**********************************/
  /* I'VE LET THEM TO SHRINK TO 0 AND I WILL CONTROL IT WITH MEDIA QUERIES
  SETTING `min` of minmax(min, max) to 0 DRASTICALLY PREVENTS THE LAYOUT TO OVERFLOW WHEN RESIZING THE WINDOW.
  */
  .header,
  .navigation,
  .main,
  .footer {
    display: grid;
    grid-template-columns: 1fr minmax(0, 120rem) 1fr;
  }
  
  .main .container {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: minmax(0, 120rem) 30rem;
    grid-template-areas: "posts sidebar";
    margin: 0;
    padding: 1rem 0;
  }
  .main .posts {
    grid-column: 1/2;
    padding: 1rem;
  }
  .main .sidebar {
    grid-column: 2/3;
    padding: 1rem;
  }
  
  /**********************************/
  /* CONTENT WRAPPER                */
  /**********************************/
  /* THESE GRID AREAS (header, main, and footer) OCCUPY FULL TRACKS.
  I USE THIS TO CONSTRAINT THE CONTENT OF GRID AREAS TO THE CENTER COLUMN IN THE MAIN GRID. */
  .container {
    grid-column: 2/3;
  }
  
  /******************************************/
  /* SOME BASIC STYLING PRESETS             */
  /******************************************/
  html {
    font-size: 10px;
  }
  
  body {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.6rem;
    margin: 0;
    padding: 0;
  }
  
  a {
    text-decoration: none;
    color: #00f;
  }
  
  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  
  li {
    display: inline;
  }
  li a {
    color: #fff;
  }
  
  .header {
    background: #888;
  }
  
  .navigation {
    background: #666;
  }
  
  .posts {
    background: #f66;
  }
  
  .sidebar {
    background: #6f6;
  }
  
  .footer {
    background: #888;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header class="header"&gt;
    &lt;div class="container"&gt;
      &lt;div class="header__logo"&gt;
        &lt;a href="#"&gt;&lt;h1&gt;LOGO&lt;/h1&gt;&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/header&gt;
  &lt;nav class="navigation"&gt;
    &lt;ul class="container"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Item 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Item 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Item 3&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;main class="main" role="main"&gt;
    &lt;div class="container"&gt;
      &lt;section class="posts"&gt;
        &lt;article class="post"&gt;
          &lt;h1&gt;This is a title&lt;/h1&gt;
          &lt;p&gt;This is the body of an article&lt;/p&gt;
        &lt;/article&gt;
      &lt;/section&gt;
      &lt;aside class="sidebar"&gt;
        &lt;span&gt;SIDEBAR&lt;/span&gt;
      &lt;/aside&gt;
    &lt;/div&gt;
  &lt;/main&gt;
  &lt;footer class="footer"&gt;
    &lt;div class="container"&gt;
      &lt;p&gt;FOOTER&lt;/p&gt;
    &lt;/div&gt;
  &lt;/footer&gt;</code></pre>
  </div>
  </div>
  </p>