How is “grid-template-rows: auto auto 1fr auto” interpreted?

Question

Recently, I created a layout using CSS grid. While this works well, I\'m confused by how it works. Specifically, I\'m confused about the line grid-template-rows: auto

Answer 1

With CSS grid layout, the grid-template-rows value auto means:

The size of the rows is determined by the size of the container, and on the size of the content of the items in the row

and 1fr is a new flexible unit in GRID css. [Fr] is a fractional unit and 1fr is for 1 part of the available space.

so thats why your 3rd grid item is taking the remaining space and all remaining grid items are taking space according to its content