Repeat 3 times 1fr. This function will be useful later when we have more complex values than 1fr. So for now, for ease of understanding, I'll change this back to 1fr, 1fr, and 1fr. The fractional units can be combined with fixed unit values or percentages too. So if we change the last value to 50%, the last column will first be assigned 50% of the total width, and then the remaining space will be divided into two equal parts. So this is what we get. If you're familiar with flex, this is similar to setting flex-basis of the items to 0 and flex-grow to 1. The fr unit helps occupy the remaining space in the grid.

The item div and the icon div alternating. Let's turn the section into the grid container by adding the rule display: grid. And using grid-template-columns, let's specify how many columns we need and of what width each. So what are the values we can give here? You can use the keyword auto. Specifying auto twice suggests that you need two columns with width decided by the content. Let's see what we have. This is perfect.