# fr unit

The `fr` unit of flexibility denotes the fraction of the total size of the space in which the element is located. The advantage of using `fr` is its adaptability to different containers or screen resolutions, since `fr` simply distributes all the space into the specified number of fractions (parts) without reference to their exact pixel size.

## Example

Let's use the `grid-template-columns` property to make sure that the first and second grid columns take up one part of the container, and the third column takes up three parts:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div>` `#parent { display: grid; grid-template-columns: 1fr 1fr 3fr; border: 2px solid #696989; padding: 10px; width: 600px; } #parent > div { padding: 10px; border: 1px solid #696989; box-sizing: border-box; border: 1px solid #696989; }`

:

## Example

Values ​​indicated in the `fr` units can be fractional values. Let's modify the previous example by specifying the width for the second and third columns in fractional values:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div>` `#parent { display: grid; grid-template-columns: 1fr 0.5fr 2.5fr; border: 2px solid #696989; padding: 10px; width: 600px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

## See also

- the `px` unit
  that specifies a size in pixels
- the `em` unit
  that specifies a size in em
- the `rem` unit
  that specifies a size in rem
- the `%` unit
  that specifies a size in percentage
- the `vw` unit
  that specifies a size in vw
- the `vh` unit
  that specifies a size in vh
- the `vmax` unit
  that specifies a size in vmax
- the `vmin` unit
  that specifies a size in vmin

← →
↑
en ru