🎯 CSS grid-auto-rows Property

grid-auto-rows is a CSS Grid property that defines the default height of automatically created rows. When a grid item does not fit into existing rows, a new row is created, and its height is controlled by this property.

Row height is automatically adjusted based on content.

Row height expands to fit the maximum size of its content.

Row height shrinks to the minimum size required by content.

You can define fixed or flexible row heights using units like px, %, or fr.

.grid {
    display: grid;
    grid-auto-rows: 100px;
}
                

Resets the property to its default value.