CSS Grid Basics 3 exercises

Defining Row and Column Sizes

Enabling Grid in the Container

As before, the first thing we need to do is enable grid in the container by setting its display to grid. This allows us to use properties like grid-template-rows and grid-template-columns.

#container {
display: grid;

Creating Two Columns

Loading solution


0:00 Let's begin. The first thing we need to do is enable grid in the container. We've done this a couple of times already, we just have to set display to grid if we want to use grid-template-rows, grid-template-columns.

0:11 Let's start by creating our two columns, so grid-template-columns. The first column is supposed to be 200 pixels wide. The second is 400 pixels. Now we have our two-column layout. That looks correct.

0:26 Now we need the three-row part. I'm going to use grid-template-rows, and my row values are 100 pixels, and then a fat 400 pixels, and then a skinny 100 pixels. That's it. Still very simple, but now we're combining rows and columns together.