Skip to content

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

Merge request reports

Loading