Nest a grid within a grid

[00:00] In this example we have an outer grid which has a few grid items. In place of the fourth one is a div with six of its own grid items. Grid items can be grid containers themselves, so we can actually nest grids within grids.

[00:20] Every immediate child of a grid container is by definition a grid item, but we're using the grid item class so that we can target grid items easier using CSS. For this nested grid let's apply the grid class name and the modifier with level two to differentiate between the outer grid and the inner grid.

[00:44] Now, we need to make this section of our markup a grid. We've got display grid on the grid selector. There's a 20 pixel gutter. Down here we've got column set. The amount of columns can change depending on screen width, but they can never get smaller than 200 pixels.

[01:04] The outer grid is taking up all the available height. The outer grid grid items are blue. Let's set a green background color for our inner grid. Now, we have a grid inside a grid. Notice that the row height adapts to the contents.

[01:29] Because our inner grid is a grid container, we can apply grid properties to it. For example, we'll use a smaller gutter and we'll give it some explicit columns. Now, we have a three column grid inside a dynamic grid.