Streaming live at 10am (PST)

Grid bugs with flexbox vertical aligned


#1

Hey Guys,

it seems that when you put a vertical flexbox into a grid field and you want that the flex items have a margin of 8px top and bottom that you can’t use the technique of giving the wrapper -8px top and bottom. It will only affect the top margin but won’t affect the bottom margin.

As you can see the bottom is not aligned:

Here as test the same scenario but without the use of grid. As you can see green div aligns perfectly to the collection above:


Here is my site Read-Only: Link
Here is the link to the site: Link
(how to share your site Read-Only link)


#2

Hi @Maurice

Thanks for posting.

I took a look at your site and it looks like your div is aligned to the bottom as expected now:

It does look like you removed flexbox though. I did some more testing and it doesn’t look like grid affects this. If you have a plain div block and a collection list inside and you use the 8px of margin on the collection items, the -8px doesn’t undo this effect:
CloudApp


#3

Nope sorry @Brando, but unfortunately it’s not aligned to the bottom, only to the top (Live Site):

I use flex on the “Collection List” because I want them to take the whole space vertically. The 8px margin on top and bottom of the collection item itself is for giving them spacing to each other. By doing this I also ad 8px of spacing to the top and bottom of the list and align this I use minus 8px top- and bottom-margin on the “Collection List”.

In my example above its working perfectly, so I think it has something to do with the grid.


#5

Hi @Maurice

It looks like the live site is lined up perfectly on this end still.

Here’s what I’m seeing:

That said, you may have made some changes to make sure it looks how you want it. This makes it a bit tricky for us to debug though as I’m unable to recreate the same set up.

If you’d like us to investigate further, can you please create an additional page in this project that shows the same layout with the issue you are referring to? Or you can duplicate this project and change the layout to show the error and we can debug from there.

Thanks!


#6

It seems it has something to do with you screen size because if I reduce the high of the viewport then it lines up perfectly.

I think you have a screen size of 1416 x 908:

But when you go bigger or smaller then this it won’t align correctly:


#7

@Brando are here any updates?