Nest a grid within a grid

Rory Smith
InstructorRory Smith
Share this video with your friends

Social Share Links

Send Tweet
Published 8 years ago
Updated 6 years ago

A grid item can also be a grid container! Let’s see how to specify 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.

egghead
egghead
~ 7 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today