Fractional units fr in CSS grid

Rows and columns in the grid can be sized not only in px, but also in flex units fr (fraction). Using these units means that the entire space for placing elements will be divided into equal shares or fractions. Each element will be able to take a certain part of this division. Let's see how this is done.

Let's use the grid-template-columns property to make the first and second columns of the grid take up one part of the container, and the third column take 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>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 1fr 1fr 3fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Let's say you have two columns in your grid. Make them the same width.

Let's say you have three columns in your grid. Make them the same width.

Let's say your grid has three columns. Make the third column twice as big as the first and second.