CSS Grid Basics 3 exercises

Adjust Row Heights in an Existing Layout

In this exercise, your task is to transform the current layout of a web page with a container that has a header, a nav, a main, and a footer.

Currently, all elements are the same size and have some text inside of them:

![layout screenshot](https://res.cloudinary.com/dwppkb069/image/upload/v1684351

Loading exercise


0:00 Next, it's time for another exercise. This time, we're working with the row direction. This is what our preview currently looks like. In the HTML file, we have a container that has a header, a nav, a main, and a footer. They're all the same size currently, and they have some text inside of them.

0:16 I'd like you to turn it into this layout, where we have a header that's slightly big, a footer that's slightly big, a main content that's very big, and then our nav bar that's pretty skinny. Now the actual dimensions are written out in the app.css. I'd like you to make four rows in this container, 150 pixels, 50 pixels, 400 pixels, and 150 pixels. You'll also need to enable grid.

0:40 Again don't touch the HTML. You're welcome to, but there's no need to. In the CSS, you don't need to touch any of the stuff between the START OF THE NO TOUCHING ZONE, and the END OF THE NO TOUCHING ZONE. All your code is going to style the container.