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.

So in your code:

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)

The Difference Between Percentage and Fr Units