We just used some CSS properties that lets us span across multiple rows and columns and move the items around the grid. We used grid lines in the previous episode, but now we'll see how to do the same using named grid areas. Let's use the same contact form example. Back to the code. I have added IDs to each of the input blocks, name block, email block, and message block. And I've also retained the rules display grid and gap. Now I'm going to give a name to each of these elements using the grid-area property like this.

Now I'm going to give a name to each of these elements using the grid area property like this. Name block, grid area, I'll be calling it name. You can give it any name here. It will not be specified within codes, so you cannot have spaces, but you can have something like hyphens or underscores. I'll just keep it as name for now. Let's do the same for message block, grid area, message, email block, grid area, email. And then the button, it's right here. So let me specify grid area, button itself.

And then the button, it's right here. So let me specify grid-area, button itself. Now each of our elements have an area name. We can use these to position them within our grid. Let's start with the mobile layout. We use the property grid-template-areas. We've seen grid-template-columns, grid-template-rows. Now we will be using grid-template-areas. And here the value would be, let me first type it and then I'll explain name in the next line, email, the next line, message, and in the last line, button.

And here the value would be, let me first type it and then I'll explain name in the next line, email, the next line, message, and in the last line, button. Each line represents a row here and we get four rows. Let's check this. Great. It's working. So the way it appears here is the way it appears in the browser. Now let's move to a larger screen size. In the media queries, we still need to specify that we need two columns by using the grid-template-columns property.

In the media queries, we still need to specify that we need two columns by using the grid-template-columns property. But now using the grid-template-areas, we will make the items occupy both the columns. So here the value would be name message. Note that it's not name and message in separate codes. It's in the same code. Each row will just be a string, name, message, email, message. So this is how it looks, right? name is the first row, first column. message is the second column, first row, email is second row, first column, and message is

Now this automatically creates a single column, but with two separate rows. So we still have the same thing, but what we want is a single row. That is, we need a single cell. Similar to the previous example, let's define grid areas first, image. Let me give it a name of something like fig. And then for the caption also, let's give a grid area and let's name it the same thing because we want both of them to occupy the same grid area. Now let's use grid template areas on the parent container to specify that we need a single cell and the grid area is fig. And there we go.