The Mozilla docs say that `align-items: stretch;` is the default behavior. If this behavior is default, why do we even need to specify the `stretch` keyword?

Frequently Asked Questions CSS FAQ
1

Question

The Mozilla docs say that align-items: stretch; is the default behavior. If this behavior is default, why do we even need to specify the stretch keyword? Can’t we just achieve the desired stretch behavior by omitting the align-items: stretch; declaration altogether?

Answer

So long as there are no declarations overwriting the default, yes you can have your grid items span the entire height of a row by simply omitting the align-items: stretch; declaration. However, it is still necessary to have this stretch keyword defined in the spec for several reasons:

  1. All default behavior is coming from a user agent stylesheet. This stylesheet needs to have this default behavior defined in order to apply the styling to our HTML document.

2)We may run into situations where we want to overwrite some other align-items property. For example, say we want to apply this declaration to our grid in desktop view: align-items: center;. However, for our mobile design we want our grid items to span the height of the entire row. In this case, we would have to overwrite our previously defined declaration with align-items: stretch; within the appropriate media query.