Flexbox to make a grid


I’m trying to do my tribute page using Flexbox. I’ve done a hand sketch of how I’d like it to look but I’m a bit confused about setting heights. I’d like the main image to take up the whole screen, which it is, then when the user scrolls down I’d like the grid to fill the whole screen.

What I am confused with is which divs do i set the height and which do i leave, for the grid? I have a container div . flex-grid and each box of the grid is .squarebox.

Any input would be great.

Many thanks


this is a good place for you to start

you need to put things in container (div) set this container to display in flex, if you want to control the height of it you could css the height of the container, check the site and you are going to get a better understanding, read through and check some examples

this site below also gives some good things about layout, try to read through it all if you dont have time check out the end where they explain flexbox , i think with these two site you should get a good understanding on to do this.

1 Like

Love the picture :grin: I’ve already put the links elsewhere but I’ve really had some trouble using flexbox.

The Net Ninja’s playlist and Wes Bos’ were really helpful for what you want to achieve. (and my apologies if it’s the nth time you see that…)

1 Like

Thanks, net ninja playlist is good. Watched half of it and I’ve learned a lot!

1 Like