Fractional units fr in CSS grids
Values specified in units of fr can take fractional form. Let's modify the previous example by specifying the width of the second and third columns in fractional numbers:
<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 0.5fr 2.5fr;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Let's say your grid has three columns. Make the third column 1.5 times the size of the first and second.
Let's say you have three columns in your grid. Make the second column 1.5 times the size of the first, and the third column 2.5 times the size of the first.
