{"id":365866,"date":"2022-05-20T07:22:07","date_gmt":"2022-05-20T14:22:07","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=365866"},"modified":"2022-05-26T07:42:50","modified_gmt":"2022-05-26T14:42:50","slug":"grid-template-areas","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-template-areas\/","title":{"rendered":"grid-template-areas"},"content":{"rendered":"\n

The grid-template-areas<\/code> CSS property allows you to define and name the cells (or \u201careas\u201d) in a CSS grid container.<\/p>\n\n\n\n

.grid-container {\n  display: grid;\n  grid-template-areas: \"header header\" \"sidebar main\";\n}<\/code><\/pre>\n\n\n\n
So, that example above? We get a two-by-two grid where the top row reserves two columns for an area named header<\/code>. The bottom row also gets two columns, but reserves them for grid areas called sidebar<\/code> and main<\/code>, respectively.<\/p>\n\n\n\n\n\n\n\n
\"Two<\/figure>\n\n\n\n
That means our grid is established and we\u2019ve defined grid areas, but there\u2019s nothing actually assigned to those grid areas. If we want to place an element in a grid area, we\u2019ve gotta explicitly declare it with the grid-area<\/code> property on that element:<\/p>\n\n\n\n
.grid-container {\n  display: grid;\n  grid-template-areas: \"header header\" \"sidebar main\";\n}\n.grid-header {\n  grid-area: header;\n}\n.grid-sidebar {\n  grid-area: sidebar;\n}\n.grid-content {\n  grid-area: main;\n}<\/code><\/pre>\n\n\n\n
Something to keep in mind is that a grid area has to either be a single cell in the grid container or a group of adjoining cells in a rectangular shape<\/strong>. That means all of the following examples are valid:<\/p>\n\n\n\n
\"Two
Those green parts are examples of valid grid template areas.<\/figcaption><\/figure>\n\n\n\n
But what we\u2019re unable to do is form non-rectangular grid areas. So, no luck if the area you want to define is more in the shape of a \u201cT\u201d or an \u201cL\u201d.<\/p>\n\n\n\n
\"Two<\/figure>\n\n\n
Syntax<\/h3>\n\n\n
grid-template-areas: none | <string><\/code><\/pre>\n\n\n\n