Calculating the actual length of fr units

Question

I'm asking here because I suck at maths.

Assuming that the grid size would be 1920px, and I'm not using explicit sizing.

How many fr's would be ie. 1200px ? And how I can calculate it ?

.grid {
  display: grid;
  grid-template-columns: 1fr 3.3335fr 1fr;
}

The spec says:

12.7.1. Find the Size of an fr

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 space to fill.

Let leftover space be the space to fill minus the base sizes of the non-flexible grid tracks.

Let flex factor sum be the sum of the flex factors of the flexible tracks. If this value is less than 1, set it to 1 instead.

Let the hypothetical fr size be the leftover space divided by the flex factor sum.

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.

Return the hypothetical fr size.

They mean that the "hypothetical fr size" would be for the unit (1fr) ? I guess so

1920/(1+3.3335+1) = 359.988750352 <-- The hypothetical fr size
359.988750352 * 3.3335 = 1200.0224993

So I guess that's a way to get how many pixels are n fr value.

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 ?

UPDATE:

Here's a live example, of what I was doing. The minmax(min, max) 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

https://codepen.io/jeflopo/pen/OmZBEJ

/**********************************/
/* 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;
}


  
    
      LOGO
    
  


  
    Item 1
    Item 2
    Item 3
  


  
    
      
        This is a title
        This is the body of an article
      
    
    
      SIDEBAR
    
  


  
    FOOTER

Calculating the actual length of fr units

1 Answers