The 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;
}

The fr unit

Example

Example

See also