CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



grid-template-areas

CSS Grid Layout is a powerful tool for creating complex layouts on the web. One of the key features of CSS Grid is the ability to define areas of the grid using the grid-template-areas property. In this article, we will explore what grid-template-areas is, how it works, and how to use it in your web projects.

What is grid-template-areas?

grid-template-areas is a CSS property that allows you to define named grid areas within a CSS Grid Layout. These named areas can then be used to place and position grid items within the layout. The grid-template-areas property takes a string value that defines the layout of the grid in terms of named areas.

The syntax for grid-template-areas is as follows:

grid-template-areas: "area1 area2 area3"
                     "area4 area5 area6";

In this example, we have defined a grid with two rows and three columns. The first row has three named areas: area1, area2, and area3. The second row has three named areas: area4, area5, and area6.

How does grid-template-areas work?

The grid-template-areas property works by allowing you to define a grid layout using named areas. Each named area is defined using a string value that represents a row of the grid. The string value consists of one or more space-separated names that represent the columns of the grid.

For example, consider the following grid-template-areas value:

grid-template-areas: "header header header"
                     "sidebar main main"
                     "footer footer footer";

In this example, we have defined a grid with three rows and three columns. The first row has three named areas, all named header. The second row has two named areas, sidebar and main, and the third row has three named areas, all named footer.

Once you have defined the named areas using grid-template-areas, you can use them to position grid items within the layout. To do this, you use the grid-area property on the grid item and set its value to the name of the area you want it to occupy.

Code Examples

Let's take a look at some code examples to see how grid-template-areas works in practice.

Example 1

In this example, we will create a simple grid layout with two rows and two columns. We will define four named areas using grid-template-areas and then position two grid items within the layout using the grid-area property.

<div class="grid-container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
</div>


In this example, we have defined a grid with two rows and two columns. We have defined four named areas using grid-template-areas: header, sidebar, main, and footer. We have then positioned two grid items within the layout using the grid-area property. The first item, Item 1, is positioned in the header area, and the second item, Item 2, is positioned in the main area.

Example 2

In this example, we will create a more complex grid layout with three rows and three columns. We will define nine named areas using grid-template-areas and then position six grid items within the layout using the grid-area property.

<div class="grid-container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
  <div class="item5">Item 5</div>
  <div class="item6">Item 6</div>
</div>


In this example, we have defined a grid with three rows and three columns. We have defined nine named areas using grid-template-areas: header, sidebar, main, and footer. We have then positioned six grid items within the layout using the grid-area property. The first item, Item 1, is positioned in the header area. The second and fifth items, Item 2 and Item 5, are positioned in the sidebar area. The third and fourth items, Item 3 and Item 4, are positioned in the main area. The sixth item, Item 6, is positioned in the footer area.

Conclusion

grid-template-areas is a powerful tool for creating complex grid layouts on the web. By defining named areas within a CSS Grid Layout, you can easily position and place grid items within the layout. With the examples provided in this article, you should now have a good understanding of how to use grid-template-areas in your web projects.

References

Activity