What's the best way to do a grid container that covers the whole page, with 1 column and 3 rows inside it?

Tell us what’s happening:
Hi! I’m on the tribute page project, and I’m having some trouble in doing something.

Here’s an image to better explain what I’m trying to do:

Basically I’m trying to make it look similar to https://www.billieeilish.com/

The first row is going to look the same, that big background picture of hers with some text on the side that reads Billie Eilish: A tribute page

The second row will be the timeline

And the third will be the footer

I thought the best way to achieve this was to make the page a grid and divide it into 3 rows. Am I wrong? Is there a better/easier way to do this?

If not, how can I approach this? I’m having some trouble in making the grid container cover the whole page.


Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:89.0) Gecko/20100101 Firefox/89.0

Challenge: Build a Tribute Page

Link to the challenge:

I recommend you start with the HTML content first before you start worrying about styling. The reason your container isn’t covering the entire page is because there is no content on your page. If you wanted to force it right now then you could add a height to the container (such as 100vh) but I don’t think you need to worry about this at the moment. Add all of your content first (unstyled) and see how it naturally stacks up. You may find you don’t need grid (or flexbox) to do what you want to do.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.