Resolve "Client logo 2: Govern everything in the header by scss"
Implementation
Switch to display: grid
allows positioning the elements with equal width via 1fr
. As we want to support an unknown number of columns, we're using:
grid-template-columns: repeat(auto-fill, minmax(0px, 1fr));
auto-fill
only works with a range, hence having to use minmax, even though there's no minimum value that we care about.
In order to keep the justify-content: space-between
appearance of the Recovery Cat logo and menu bar, we're using :first-child
and :last-child
to set the alignment of the first and last elements to be left and right, respectively. The other elements are justified via the parent with justify-items: center
, so they'll be centered evenly
Testing
I made an example branch here. It's not a logo, but shows a generic element being positioned centered within the other two
Closes #1011
Edited by James Jenkinson