Dynamic Grid Layout

Hi there!

I am having trouble aligning my header (in specific the “Work” header) with the dynamic grid that is changing columns based on the browser width.

Ultimately, as far as headers go, what I am trying to achieve is the following: https://facebook.design/ Notice how the headers always perfectly align with the grid elements there.

Thanks for any help!!


Nice work you did!
Give the headline wrapper this settings:

And for the grid change the Distribute alignment to the left.
Screen Shot 2020-05-10 at 2.46.05 PM

I hope this will help.

Thanks for your response! However, this is not exactly what I am trying to achieve! Once the browser width gets smaller and it jumps right from to 3 cols to 2 for example, the header and grid are aligned to the left. I want them to be aligned and always be centered!

You can see it on the screenshot here:

Ideally this would be centered and correctly aligned :slight_smile:

Edit: Here’s a closer look how it should ideally behave:


The only solution I can think of is custom CSS media queries for the header wrapper. Is there perhaps an easier way?