Grid Template areas

8 minutes read

CSS Grid is a robust layout system that allows you to create complex web layouts smoothly and with ease. One of the key features of the CSS Grid is to create two-dimensional layouts, meaning you can define both rows and columns. Another important feature is to create grid areas that can be used to place and position elements on the grid. In this topic, you'll learn how CSS Grid and its properties like grid template areas, grid areas, and others can help you make elegant and beautiful layouts in your web applications.

Grid template areas

The grid-template-areas property in CSS allows you to define named grid areas within a CSS Grid layout. Using this CSS property you'll be able to create a visual map of the layout of your choice. You can also define where elements on the web page should be placed based on their relationship to named grid areas.

This property accepts a string value that specifies the names of the grid areas in the layout. (You'll learn more about grid-area in the next section.) The names are separated by white space, and each row is separated by a newline character. The areas specified using grid-template-areas are not associated with any particular grid item but can be referenced from the different grid placement properties like grid-area, grid-row, grid-column, and so on. This might seem like a lot, but don't fret! Let's review a simple example to understand this property.

HTML:

<body>
  <div class="grid-container">
    <div class="header">Header</div>
    <div class="main">Main</div>
    <div class="sidebar">Sidebar</div>
    <div class="footer">Footer</div>
  </div>
</body>

CSS:

/* Gird template areas */

.grid-container {
  background-color: lightblue;
  height: 600px;
  width: 600px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 200px 200px 200px;
  grid-template-areas:
    "header header header"
    "main main sidebar"
    "footer footer footer";
}

Here's the output that we get:

Output image explaining the grid template areas

grid-template-areas accepts strings as values. A string can be any name you want to give to a specific grid template area.

Now, we have defined grid-template-areas in the above example, but there is no effect of this as the layout is still not completed. All the grid items are still in their original position. But you can see the area names in the output image above. The first row reserves three cells or columns for the area named header. Similarly, the middle row reserves two cells for the area named main and one cell for the area named sidebar, and the last row reserves three cells for the area named footer.

This means that our grid container is established but we do not have any items assigned in that container. If you have to place an element in that grid area you have to assign it using the grid-area CSS property. Also, note that an empty cell in a grid-template-areas string is represented by a . (period) character.

Output image explaining gird names in grid container

You'll see the grid names in the output in the Firefox dev tools and not in Chrome dev tools.

Grid area

In the above example of grid-template-areas you saw that this property is used to create different areas in the grid container but there are no elements assigned to those grid areas. You can assign them using the grid-area property. It is used to assign each grid item to a specific grid area defined in the grid-template-areas property. By assigning each item to a named grid area, we can control exactly where it appears on the grid.

Let's add the grid-area CSS property in the CSS code from above to actually see the effect.

/* Grid template areas - code snippet here */

.header {
  grid-area: header;
}

.main {
  grid-area: main;
}

.sidebar {
  grid-area: sidebar;
}

.footer {
  grid-area: footer;
}

Here's the output:

Output image explaining grid area in grid container

As you can see in the example above, after applying grid-areas the grid items shifted according to the grid-template-areas and grid-area. For example, the first row reserves the three cells for the area named header. As soon as we applied the grid-area: header to the header element, it takes the reserved space. The same holds true for the other items to which grid-area is applied.

Note that one cell in a grid contains only one grid area, i.e. first cell from the grid above has only header as grid area.

You can use grid-area the other way too. The grid-area CSS property determines a grid item's size and location within the grid by contributing a line, a span, or nothing to its grid placement. This CSS property is shorthand for grid-row-start, grid-column-start, grid-row-end, grid-column-end.

Let's consider an example to understand the grid-area property.

HTML:

<body>
  <div class="grid-container">
    <div class="grid-item item-1">Item 1</div>
    <div class="grid-item item-2">Item 2</div>
    <div class="grid-item item-3">Item 3</div>
    <div class="grid-item item-4">Item 4</div>
    <div class="grid-item item-5">Item 5</div>
    <div class="grid-item item-6">Item 6</div>
    <div class="grid-item item-7">Item 7</div>
    <div class="grid-item item-8">Item 8</div>
    <div class="grid-item item-9">Item 9</div>
  </div>
</body>

CSS:

.grid-container {
  background-color: lightblue;
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}

/* grid-area: grid-row-start, grid-column-start, grid-row-end, grid-column-end; */

.item-1 {
  grid-area: 1 / 1 / 2 / 2;
}

.item-2 {
  grid-area: 1 / 2 / 2 / 3;
}

.item-3 {
  grid-area: 1 / 3 / 2 / 4;
}

.item-4 {
  grid-area: 2 / 1 / 3 / 2;
}

.item-5 {
  grid-area: 2 / 2 / 3 / 3;
}

.item-6 {
  grid-area: 2 / 3 / 3 / 4;
}

.item-7 {
  grid-area: 3 / 1 / 4 / 2;
}

.item-8 {
  grid-area: 3 / 2 / 4 / 3;
}

.item-9 {
  grid-area: 3 / 3 / 4 / 4;
}

Here's the result:

Output image explaining grid area in grid container

In the example above, a grid layout is created with three rows and three columns. The grid-area property is used to position each item within the grid container. The first item (.item-1) starts in row 1, column 1, and ends in row 2, column 2. Similarly, the start and end of all the grid items are set using the grid-area property. For example, the eighth item (.item-8) starts in row 3, column 1 or -4, and ends in row 4 or -4, column 3 or -2.

You can switch on the grid lines to understand the start and end positions more clearly.

Grid template

The CSS Grid allows you to create grids and you can rearrange the grids into rows and columns of your choice. This is possible with the help of the grid-template-rows and grid-template-columns CSS properties. You should already know about these properties. Now, there is a shorthand property to define grid-template-rows, grid-template-columns, and grid-template-areas in a single declaration. You can achieve this by using the grid-template property.

Let's consider an example of a grid container in which we'll define our grid using the grid-template shorthand property.

HTML:

<body>
  <div class="grid-container">
    <div class="header">Header</div>
    <div class="main">Main</div>
    <div class="sidebar">Sidebar</div>
    <div class="footer">Footer</div>
  </div>
</body>

CSS:

.grid-container {
  display: grid;
  background-color: lightblue;
  grid-template:
    "header header header" 150px
    "main main sidebar" 50px
    "footer footer footer" 30px
    / 1fr 2fr 2fr;
}

.header {
  grid-area: header;
}

.main {
  grid-area: main;
}

.sidebar {
  grid-area: sidebar;
}

.footer {
  grid-area: footer;
}

Here's the output:

Output image explaining grid template in grid container

In the example above, a grid container is created which is set to the grid using display: grid. The grid-template property specifies the grid-template-rows, grid-template-columns, and grid-template-areas CSS properties. The first line in grid-template "header header header" 150px defines the first row of the grid which is named header and has a height of 150px. The second line "main main sidebar" 50px defines the second row of the grid which has two sections main and sidebar and has a height of 50px. The third line "footer footer footer" 30px defines the third row of the grid which is named footer and has a height of 30px.

The last line in the grid-template property 1fr 2fr 2fr separated with / defines the grid columns. The first column has a width of 1 fraction of the available space, and the second and third columns have a width of 2 fractions of available space.

There are many variations to specify the grid-template CSS property. For the purpose of simplicity, we'll stick to a single way as mentioned in this topic. You can refer to official docs to learn more.

Conclusion

In this topic, you've learned about three important CSS Grid properties that are used to create flexible and dynamic grid layouts for web projects. Grid template areas allow you to define and name the areas of the grid that can then be used to place the content within those areas. Grid areas, on the other hand, refer to the individual cells of the grid and are used to determine a grid item's size and location within the grid. At last, you've learned about the grid-template CSS property which defines the overall structure of the grid by specifying the number of rows and columns and their sizes.

14 learners liked this piece of theory. 0 didn't like it. What about you?

Report a typo

Grid Template areas