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.
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
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!