﻿ The Difference Between Percentage and Fr Units - ITCodar

# The Difference Between Percentage and Fr Units

## The difference between percentage and fr units

#### `fr`

The `fr` unit works only with the free space in the container.

``grid-template-columns: repeat(12, 1fr);``

... the free space in the container is distributed equally among 12 columns.

Since the columns are only dealing with free space, `grid-column-gap` is not a factor. It was subtracted from the container width before the `fr` length was determined (spec reference).

Here's how the browser does the calculation:

``(free space - gutters) / 12  = 1fr``

#### `%`

When you're using percentages...

``grid-template-columns: repeat(12, calc(100% / 12));``

... the container is divided into 12 columns, each having a width of 8.33333%. This is an actual length, unlike the `fr` unit, which only deals with free space.

Both the column lengths and grid gaps are factored into the width.

Here's how the browser does the calculation:

``8.33333% * 12 = 100%         +11 * 10px     = 110px``

There's a clear overflow.

(Note: `grid-*-gap` properties apply only between grid items – never between items and the container. That's why the number of grid-gaps is 11, not 13.)

This works:

``grid-template-columns: repeat(12, calc(8.3333% - 9.1667px));``

Which breaks down to this:

• 12 columns

• the width of each column is determined by taking the full width of the container (`100%`) and dividing it by 12

``100% / 12 = 8.3333% (individual column width)``
• then subtract the column gaps (there are 11)

`` 10px * 11 = 110px (total width of column gaps)110px / 12 = 9.1667px (amount to be deducted from each column)``

``.grid {  display: grid;  grid-template-columns: repeat(12, calc(8.3333% - 9.1667px));  grid-column-gap: 10px;  grid-row-gap: 10px;  justify-content: center;}.l-1 { grid-column-start: span 1; }.l-2 { grid-column-start: span 2; }.l-3 { grid-column-start: span 3; }.l-4 { grid-column-start: span 4; }.l-5 { grid-column-start: span 5; }.l-6 { grid-column-start: span 6; }.l-7 { grid-column-start: span 7; }.l-8 { grid-column-start: span 8; }.l-9 { grid-column-start: span 9; }.l-10 { grid-column-start: span 10; }.l-11 { grid-column-start: span 11; }.l-12 { grid-column-start: span 12; }[class*=l-] { border: 1px solid red; }``
``<div class="grid">  <div class="l-6">Column 1</div>  <div class="l-6">Column 2</div>  <div class="l-3">Column 3</div>  <div class="l-4">Column 4</div>  <div class="l-3">Column 5</div>  <div class="l-2">Column 6</div>  <div class="l-1">Column 7</div>  <div class="l-10">Column 8</div>  <div class="l-1">Column 9</div>  <div class="l-5">Column 10</div>  <div class="l-5">Column 11</div>  <div class="l-2">Column 12</div></div>``

## CSS Grid: fr and percentage unit difference

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>``

## What's the difference between em units and percents?

OK, so I've decided to sum up the answers.

• line-height's percentage value is relative to the current font-size.
• em units is always relative to font-size.
• Percents depends on context. For example, if they're used in font-size, they will be relative to the current font-size; if it's in height, they will be relative to the height.
• It changes a little bit when parent tag has font size declared as "small", "medium" or "large", because values of these are affected by browser's setting. In this context 1em =\= 100%, 1em seems to make setting a bit more "small" or a bit more "large" than 100%, read about it here.
Thank you, guys. :)

## In CSS Grid why is 1FR+9FR not behaving the same as 10FR in small screen sizes?

Add `min-width:0` to input and you should fix the percentage value so they are exacltly the same as the `fr`. You have `31fr` so `1fr` is about `100/31 = 3.225%`

``.A {  grid-area: a;}.B {  grid-area: b;}.C {  grid-area: c;}.Exchange_Row {  display: grid;  grid-template-columns: 1fr 9fr 10fr 10fr 1fr;  grid-template-areas: "a a b c ."}.Exchange_Row.percentage { grid-template-columns:  3.225% 29.03% 32.25% 32.25% 3.225%;}input[type=text] {  border: solid;  min-width:0;}``
``<div style="width: 90%; border: solid; border-radius: 5px; padding: 5px;">  <div id="currencyRow" class="Exchange_Row">    <input type="text" class="A" value="A" />    <input type="text" class="B" value="B" />    <input type="text" class="C" value="C" />  </div></div><div style="width: 90%; border: solid; border-radius: 5px; padding: 5px;">  <div id="currencyRow" class="Exchange_Row percentage">    <input type="text" class="A" value="A" />    <input type="text" class="B" value="B" />    <input type="text" class="C" value="C" />  </div></div>``

## CSS Units - What is the difference between vh/vw and %?

`100%` can be `100%` of the height of anything. For example, if I have a parent `div` that's `1000px` tall, and a child `div` that is at `100%` height, then that child `div` could theoretically be much taller than the height of the viewport, or much smaller than the height of the viewport, even though that `div` is set at `100%` height.

If I instead make that child `div` set at `100vh`, then it'll only fill up `100%` of the height of the viewport, and not necessarily the parent `div`.

``body,html {    height: 100%;}.parent {    background: lightblue;    float: left;    height: 200px;    padding: 10px;    width: 50px;}.child {    background: pink;    height: 100%;    width: 100%;}.viewport-height {    background: gray;    float: right;    height: 100vh;    width: 50px;}``
``<div class="parent">    <div class="child">        100% height        (parent is 200px)    </div></div><div class="viewport-height">    100vh height</div>``

## Using fraction (fr) in calc() gives Invalid property value

An `fr` unit is not a standard length, like percentages or pixels. It represents only leftover space.

Therefore, `fr` cannot be used in `calc()` expressions.

§ 7.2.3. Flexible Lengths: the `fr`
unit

A flexible length is a dimension with the `fr` unit, which represents
a fraction of the leftover space in the grid container.

`fr` units are not lengths so they cannot be represented in `calc()` expressions.

But do you really need `calc()` in the first place?

`fr` applies only to remaining space, which is what is left after true lengths, such as width, borders, margin and padding have been factored in.

Consider using `fr` on its own. Otherwise, post a complete example with the problem.

## CSS Grid: Grid-gap causing items to overflow?

Update the code like below (related question to understand the first code adjustment: Why does minmax(0, 1fr) work for long elements while 1fr doesn't?)

``* {  margin: 0;}.container {  display: flex;  justify-content: center;  background-color: firebrick;}.form {  display: flex;  flex-direction: column;  padding: 2rem;  margin: 2rem;  width: 25rem;  background-color: white;}.content {  border: 1px solid red;  display: grid;  grid-template-columns: repeat(2, minmax(0,1fr)); /* here */  grid-gap: 4rem;}/* here */input {  max-width: 100%;  box-sizing: border-box;}``
``<div class="container">  <form class="form">    <div class="content">      <div class="field">        <label for="title" class="label">Title</label>        <input type="text" placeholder="Job Title" id="title" class="input">        <i class="icon icon--success"></i>        <i class="icon icon--fail">        </i>        <small class="error-msg"></small>      </div>      <div class="field">        <label for="company" class="label">Company</label>        <select name="company" id="company" class="input">            <!-- options added in js -->        </select>        <i class="icon icon--success"></i>        <i class="icon icon--fail"></i>        <small class="error-msg"></small>      </div>      <div class="field">        <label for="location" class="label">Location</label>        <select name="location" id="location" class="input">            <!-- options added in js -->        </select>                                <i class="icon"></i>        <i class="icon"></i>        <small class="error-msg"></small>      </div>      <div class="field">        <label for="wage" class="label">Wage</label>        <input type="text" placeholder="Wage" id="wage" class="input">        <i class="icon icon--success"></i>        <i class="icon icon--fail"></i>        <small class="error-msg"></small>      </div>      <div class="field">        <label for="type" class="new-job__label">Type</label>        <select name="type" id="type" class="input">          <!-- options added in js -->        </select>        <i class="icon icon--success"></i>        <i class="icon icon--fail"></i>        <small class="error-msg"></small>      </div>      <div class="field">        <label for="position" class="label">Position</label>        <select name="position" id="position" class="input">          <!-- options added in js -->        </select>        <i class="icon icon--success"></i>        <i class="icon icon--fail"></i>        <small class="error-msg"></small>      </div>      <div class="field">        <label for="pqe" class="label">PQE</label>        <select name="pqe" id="pqe" class="input">            <!-- options added in js -->        </select>        <i class="icon icon--success"></i>        <i class="icon icon--fail"></i>        <small class="error-msg"></small>      </div>      <div class="field">        <label for="featured" class="label">Featured</label>        <select name="featured" id="featured" class="input">          <!-- options added in js -->        </select>        <i class="icon icon--success"></i>        <i class="icon icon--fail"></i>        <small class="error-msg"></small>      </div>    </div>    <button class="new-job__submit">Submit</button>  </form></div>``

## How to calculate percent difference for an aggregated measure in Tableau?

Bury the date into the Net Sales calcs.

``SUM(if [In Current Period?] then [Gross Sales] END)-ZN(SUM(if [In Current Period?] then [Promotions] END))-ZN(SUM(if [In Current Period?] then [Refund_Amount] END))-ZN(SUM(if [In Current Period?] then [OrderTax] END))-ZN(SUM(if [In Current Period?] then [Shipping Tax] END))``

and

``SUM(if [In Prior Period?] then [Gross Sales] END)-ZN(SUM(if [In Prior Period?] then [Promotions] END))-ZN(SUM(if [In Prior Period?] then [Refund_Amount] END))-ZN(SUM(if [In Prior Period?] then [OrderTax] END))-ZN(SUM(if [In Prior Period?] then [Shipping Tax] END))``

Then this will work.

% Diff Net Sales: `([Current Period Sales]-[Prior Period Sales]) /[Prior Period Sales]`

## CSS - Grid Causing Overflow

Use `1fr` instead of `75%`.

`fr` is a fractional unit and `1fr` is for 1 part of the available
space.

``<style>#wrapper {  display: grid;  grid-template-columns: minmax(275px, 25%) 1fr;}</style><div id="wrapper">   <div>One</div>   <div>Two</div></div>``

## Behavior on logicals and character percentages

The help function `?percent` says: `Value: percent returns a character vector`. If you ask `percent(x) < percent(c(.5))` than you ask for string comparison, and the string `250%` is indeed smaller than the string `50%`, because 2 comes before 5 (lexicographical sorting)