Create a Nested CSS Grid Layout

In many cases, you might have a specific area on your website that could benefit from using CSS Grid. Just because your whole page layout is using Grid doesn't mean you can't have a Grid within a Grid.

You'll see how to style a Grid area full of items with more Grid. We'll turn grid on and start applying the usual suspects: grid-template-columns and grid-gap.

You'll see how CSS Grid implicitly adds its style to additional rows without you having to style them. This makes your layout flexible because you don't have to predict how many items are going to be in a Grid area.

Lesson Challenge

When should you let grid implicitly decide what to do vs. explicitly defining it yourself?