Use Grid-Area and Grid-Template-Areas to Create a Responsive Website

Learning to use grid can be a headache when you’re first starting out. Understanding a few concepts is key when creating your layout and knowing grid terminology is the first step on that journey.

Terminology

Grid lines: Are the vertical and horizontal lines that divide the grid and separate the columns and rows. The count always starts at 1, not 0.

Grid cell: A single child of a CSS grid.

Grid area: Any rectangular space surrounded by four grid lines. It can contain any number of grid cells.

Grid track: The space between two grid lines. This space can be horizontal or vertical: a grid row or grid column

Grid row: A horizontal grid track.

Grid column: A vertical grid track.

Gap: Space between two rows and/or two columns.

Drawing Your Grid Layout

Now that we have our terminology down let’s start looking at how we can start building out our layout. The biggest tip I can offer when creating your grid layout is to draw one out using rectangular shapes to stand in as elements on your page. Use a drawing application like Canva or any other app of your choice. (freehand drawing is also great!)

Drawing out the grid lines in even squares will help you visualize how to split or group your elements.

Let’s take a look at a more visual representation of how your website will be broken into with our new found terminology! In the example below each number represents one grid cell. The grid lines that were added in the previous example have now been slightly modified to show the gap between two rows and columns. A grid area can be any two or more grid cells. For example grid cells 1, 2, 4, and 5 together create one grid area. A grid track in this example can be grid cells 4, 5, and 6. With that in mind, our grid rows are made up of three different grid tracks: [1,2,3], [4,5,6], and [7,8,9]. Our grid columns are also made up of three grid tracks: [1,4,7], [2,5,8] and [3,6,9].

Setting Up Your Grid Elements

There are a variety of ways to use grid. but because this is a guide for beginners we will use the grid area and grid template areas to start our journey towards understanding grid. Below I created fake information and added a placeholder image for all the elements I want to include in this profile page.

In our original layout drawing, we had a total of four main elements we wanted to place on our page. Each of these elements should be wrapped in a <div> with an appropriate class name as shown below. You also need to wrap all your<div> elements in a <div> wrapper, also known as your grid area.

Once that's all set, we can link our styles page and start to code the CSS portion of our grid layout. In the example below all the <div> elements have been defined using grid-area: and set to a corresponding value. We then call on the profile class and define this <div> element as our grid with the display: property.

To set the location of each of our <div> elements we will use the grid-template-areas: property. The first string on line 3 will contain the first grid row [1,2,3]. Since our navigation bar takes up the first three grid cells in that row we will call on it three times. The second string will be our second grid row [4,5,6]. Our profile picture takes up the first grid cell and contact information takes up the other two so profile-pic will be called once first and then contact-info will be called 2 times after. The same logic goes for our third and final grid row. The last string on line 5 will contain our last three grid cells [7,8,9]. The bottom half of our profile picture takes up the first cell and our biography takes up the last two so our string will be written in that order with bio being called on twice.

This is how our layout currently looks like. With our built-in browser inspector tools we can see that although our image isn’t long enough to take up the entire two grid cells, its grid area is placed exactly as we wanted.

Now let’s add some padding, background colors, and borders to better visualize how our grid is now set.

Our profile page could be styled further with real information and pictures but our current ugly borders give a visual representation of what we’ve accomplished so far with grid-area and grid-template-areas. Our profile page is now responsive so when the browser window is set to a smaller width our elements adjust as shown in the example below.

Conclusion

You can use your new-found knowledge to create any responsive layout. Continue to learn more about grid and CSS here. Good luck on your CSS journey!