HTML & CSS · Middle · Question 7 of 75

How do you define a "header on top, sidebar and content in the middle, footer at the bottom" layout in Grid with named areas?

1With grid-area-names: header sidebar main footer on the container
✓Correct answer: With grid-template-areas on the container and grid-area on the children
3With named grid-template-columns and grid-column: name on the children

Explanation

grid-template-areas describes the layout as string "pictures": "header header" "sidebar main" "footer footer", and items attach via grid-area: header. A dot . marks an empty cell. It's great for responsiveness: a media query only changes the template. There is no grid-area-names property.

How do you define a "header on top, sidebar and content in the middle, footer at the bottom" layout in Grid with named areas?

Explanation

Further reading

Problem with a question

Test yourself