CSS grid introduced a new length unit, fr, to create flexible grid tracks. Referring to the code sample below, what will the widths of the three columns be?

.grid {
  display: grid;
  width: 500px;
  grid-template-columns: 50px 1fr 2fr;
}

1.  The first column will have a width of 50px. The second column will be 50px wide and the third column will be 100px wide.
2.  The first column will have a width of 50px. The second column will be 150px wide and the third column will be 300px wide.
3.  The first column will have a width of 50px. The second column will be 300px wide and the third column will be 150px wide.
4.  The first column will have a width of 50px. The second column will be 500px wide and the third column will be 1000px wide.

Correct Answer:

•  The first column will have a width of 50px. The second column will be 150px wide and the third column will be 300px wide.