When you work with Grid, you work with two kinds of page objects: containers and items. A grid container is any type of parent block element—div, p, any of the HTML semantic page elements (such as main or article), even the body element—that surrounds one or more elements. These child elements are called grid items.

So, before you can do anything with Grid, you first need to decide which block-level element will be the grid container. Once you’ve done that, converting that element into a container is done with a single CSS declaration:

display: grid;

Once you've done that, the container’s child elements automatically become grid items; no extra rules or declarations or code is required.

In the HTML Editor, note that I’ve set up a div element with the class container. In the CSS Editor, I’ve applied display: grid to the .container class. As you can see in the Results window, it looks like nothing much has happened since the child div elements are still displayed using the default layout. To fix that, you need to specify your grid rows and columns, which we’ll do next.