{"id":372634,"date":"2022-08-26T06:44:49","date_gmt":"2022-08-26T13:44:49","guid":{"rendered":"https:\/\/css-tricks.com\/?p=372634"},"modified":"2022-08-26T06:44:50","modified_gmt":"2022-08-26T13:44:50","slug":"using-grid-named-areas-to-visualize-and-reference-your-layout","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/using-grid-named-areas-to-visualize-and-reference-your-layout\/","title":{"rendered":"Using Grid Named Areas to Visualize (and Reference) Your Layout"},"content":{"rendered":"\n

Whenever we build simple or complex layouts using CSS Grid, we’re usually positioning items with line numbers. Grid layouts contain grid lines that are automatically indexed with positive and negative line numbers (that is unless we explicitly name them<\/a>). Positioning items with line numbers is a fine way to lay things out, though CSS Grid has numerous ways to accomplish the same with an undersized cognitive encumbrance. One of those ways is something I like to think of as the “ASCII” method.<\/p>\n\n\n\n\n\n\n

The ASCII method in a nutshell<\/h3>\n\n\n

The method boils down to using grid-template-areas<\/code> to position grid items using custom-named areas at the grid container level rather than line numbers.<\/p>\n\n\n\n

When we declare an element as a grid container using display: grid<\/code>, the grid container, by default, generates a single-column track and rows that sufficiently hold the grid items. The container’s child elements that participate in the grid layout are converted to grid items, irrespective of their display<\/code> property.<\/p>\n\n\n\n

For instance, let’s create a grid by explicitly defining columns and rows using the grid-template-columns<\/code><\/a> and grid-template-rows<\/code><\/a> properties.<\/p>\n\n\n\n

.grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-template-rows: repeat(3, 200px);\n}<\/code><\/pre>\n\n\n\n
This little snippet of CSS creates a 3\u00d72 grid where the grid items take up equal space in the columns, and where the grid contains three rows with a track size of 200px<\/code>.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
We can define the entire layout with named grid areas<\/a> using the grid-template-areas<\/code><\/a> property. According to the spec<\/a>, the initial value of grid-template-areas<\/code> is none<\/code>.<\/p>\n\n\n\n
grid-template-areas = none | <string>+<\/code><\/pre>\n\n\n\n
<string>+<\/code> is listing the group of strings enclosed with a quote. Each string is represented as a cell, and each quoted string is represented as a row. Like this:<\/p>\n\n\n\n
grid-template-areas: \"head head\" \"nav main\" \"foot foot\";<\/code><\/pre>\n\n\n\n
The value of grid-template-areas<\/code> describes the layout as having four grid areas. They are,<\/p>\n\n\n\n