Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Nest a grid within a grid

    Rory SmithRory Smith

    A grid item can also be a grid container! Let’s see how to specify a grid within a grid.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson




    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.

    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.

    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.

    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.

    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.