I was incorporating CSS Grid into my header layout and discovered that in Firefox and Chrome align-items: center doesn't work as expected when the child element using a percentage for max-height. My practice has been to use max-height: 100% and width: auto to fit logos into site header. It doesn't look like I can do this using grid. It does appear to work in Safari.
I was incorporating CSS Grid into my header layout and discovered that in Firefox and Chrome align-items: center doesn't work as expected when the child element using a percentage for max-height. My practice has been to use max-height: 100% and width: auto to fit logos into site header. It doesn't look like I can do this using grid. It does appear to work in Safari.
Pen: https://codepen.io/joelcomit/pen/wrBqNL