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?
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:
- 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.