Get up and running with CSS Grid Layout

Place grid items on a grid using grid-column and grid-row

Specify a grid gutter size with grid-gap

Describe a grid layout using named grid lines

Refer to fractions of available space with the fr unit

Describe a grid layout using grid-template-areas

Use the minmax function to specify dynamically-sized tracks

Use the repeat function to efficiently write grid-template values

Use auto-fill and auto-fit if the number of repeated grid tracks is not to be def

Change the auto-placement behaviour of grid items with grid-auto-flow

Specify the sizes of implicitly created grid tracks

Re-order the appearance of grid items using the order property

Nest a grid within a grid

Specify grid columns, rows, and areas at once with the grid-template shorthand

Specify many grid properties at once with the grid shorthand

Build Complex Layouts with CSS Grid Layout

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.

Course

Build Complex Layouts with CSS Grid Layout

Nest a grid within a grid

Share this video with your friends