Need help practicing CSS grid


I’ve tried making a basic blog layout/template to practice using CSS grid. There are a few problems I’m having, firstly, how do I get my nav bar at the top to display horizontally? Secondly, as I’ve added content, the size of the footer section has got bigger and bigger, why is that and how would I stop that?

Try setting its display to flex (and the list as well).

The rows are setup to be 1fr 5fr 1fr. That adds up to 7 equal parts total (the height of each part depends on the total height of the whole grid), and the first and third rows will take up 1 part each. You probably don’t need to explicitly set the template rows property.