In this tutorial, you’re going to learn how to use CSS Grid Layout to help you quickly and easily prototype page layouts in the browser. This is the project on CodePen you’ll be working with. And here is the URL, which you can also find linked within the Resources section for this video.

This tutorial owes a large debt to the work of Jonah Paulino in her article CSS Grid for Designers, which goes into detail on how CSS Grid works as well as how it’s used as a prototyping tool at the New York Times. But one thing it doesn’t have are code snippets that you can work with. So we’ve gone ahead and made our own modified version for you to explore.

You’ll get to the code shortly. But let’s explore this idea from a high level first. The well-known UX designer Bill Buxton argued that prototypes should be quick, timely, inexpensive, disposable, and plentiful.

Let’s see how CSS Grid Layout performs on those metrics. Let’s say you want to prototype a few different web layouts for an article on jazz musician Charlie Parker. Your HTML content is already structured as an image tag (img), header, and div. You define three columns using CSS Grid Layout.

Next, in your CSS, you define a grid-area for each type of content, in this case, grid-area: image;, grid-area: headline;, and grid-area: text;. Each grid-area lives inside a class that gets added to its respective HTML element. And for the sake of simplicity, I’m going to label these image, headline, and text. Again, you’ll get a chance to work with the real code here in a minute.

The last step is to add the grid area template syntax: grid-template-areas:. And this tells each item of content where to go and how much space to take up.

This syntax ends up looking like this:

grid-template-areas:
  "image image image"
  "headline text text"

The first line represents the first row and makes the image span the first, second, and third columns. The second line represents the second row, and places the headline in the first column, the text element in the second column, and that spans across to the end.

Now what makes this model so great for prototyping is you can quickly experiment with new layouts simply by changing your grid area names.

grid-template-areas:
  "image image headline"
  "image image text"

So this syntax makes the image span across the first two columns as well as the first two rows. And the headline and text are placed in the third column. Let’s look at one more:

grid-template-areas:
  "headline headline headline"
  "image image text"

This syntax results in yet another unique layout where the headline spans across the three columns, and in the second row, you have the image spanning two columns and then the text in the third. So now you know the theory. Let’s look at it in practice.

In your HTML, you’ll see the div with the class of grid. And this defines the grid, the number of columns, and the grid gap between the rows and columns. And then there’s a secondary class with the name of layout-v1.

If you examine this layout in full view, you can see the first layout I mentioned earlier.

And here we are: grid areas: image, image, image, and then headline, text, text.

grid-template-areas:
  "image image image"
  "headline text text"

Go back to your editor view. And in the CSS, locate the code for the layout-v1 class. Also notice the two additional classes of v2 and v3 immediately below. So all of these are the actual code for the demos you saw earlier.

And all you need to do to change your layout is update these class names in your HTML. Change v1 to v2, and you’ll see the second layout. Update v2 to v3, and you have the third layer.

I’d say this already satisfies most of the criteria on our prototyping list. Now you’re going to do one of your own. Go ahead and copy the entire code block for layout-v3 and paste it below.

Then change this to v4. And in your HTML, be sure to update this to v4 as well. And now you get to play.

Let’s say you wanted to see a layout in which the image was constrained to a single column.

That might look like this:

grid-template-areas:
  "image headline headline"
  "image text text"

Or if you wanted to see the image on the right hand side, you could revise it like so:

grid-template-areas:
  "headline headline image"
  "text text images"

One last tip for you. Here the image is placed in the top row. But what if you wanted it to start on the second row?

To do that, replace this first image with a . (period). And then you’ll see the image drop down to the second row. So adding that full stop character forces the first grid cell to be empty:

grid-template-areas:
  ". headline headline"
  "image text text"

Going back to our list, there is one metric I want to point out. Is this code disposable? Well, sure.

On one hand, a developer could easily recreate this layout using any technique she chooses. On the other hand, because this is straight ahead HTML and CSS and you’re already in the browser, this could also be repurposed and end up in production. And that my friends, is the advantage of CSS Grid Layout for prototyping. If you like this Take 5 video, be sure to check out the rest of the series and our entire course catalog at Gymnasium.