Grid template areas is a preferred method for defining the structure of CSS Grid due to its visual nature and ease of item placement using the grid-area property
After setting up a grid container using display: grid; or display: inline-grid;, you need to define the structure of your grid, specifically its rows and columns, known as grid tracks. Explain tracks using grid-template-rows and grid-template-columns, another method is to explain grid areas using the grid-template-areas property.
A grid area is well-defined as a rectangular area on the grid made up of one or more grid cells. It exists between two vertical grid lines and two horizontal grid lines. The grid-template-areas property is applied to the grid container.
The value of grid-template-areas is a series of quoted strings, where each string represents a row of the grid. Inside each string, you list the names of the grid areas that occupy the cells in that row, separated by spaces.
Example: if you want a grid with three rows and three columns, you might define the template like this:
.container {
display: grid;
grid-template-areas:
'header header header' /* Row 1 */
'sidebar content content' /* Row 2 */
'footer footer footer'; /* Row 3 */
}In the above example, the first row is named header across all three columns. The second row has a sidebar area in the first column and a content area spanning the second and third columns. We refer to the third row as the footer, which spans all three columns.
grid-area
Once grid areas are clear using grid-template-areas, easily place grid items into named areas. This is using the grid-area property on the individual grid items. The value of grid-area is simply the name of the grid area you defined in the template.
Using grid-area with a area handles the item’s grid-column-start, grid-column-end, grid-row-start, and grid-row-end configuration.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.item1{
grid-area: 2 / 2 / span 2/span 3 ;
}
.container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<section class="container">
<div class="item item1">Item 1</div>
<div class="item item2">Item 2</div>
<div class="item item3">Item 3</div>
<div class="item item4">Item 4</div>
<div class="item item5">Item 5</div>
<div class="item item6">Item 6</div>
<div class="item item7">Item 7</div>
<div class="item item8">Item 8</div>
<div class="item item9">Item 9</div>
<div class="item item10">Item 10</div>
<div class="item item11">Item 11</div>
<div class="item item12">Item 12</div>
</section>
</body>
</html>In the above example you can change the values in grid-area and see the results
To place items into the grid areas defined above, you would add the following CSS rules for the grid items:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-areas:
"header header zz"
"content content yy"
"footer xx xx ";
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 1fr 100px;
gap: 1em;
}
header {
grid-area: header;
background-color: #f0f0f0;
padding: 1em;
}
aside {
grid-area: sidebar;
background-color: #d3eaf2;
padding: 1em;
}
main {
grid-area: content;
background-color: #e0f7df;
padding: 1em;
}
footer {
grid-area: footer;
background-color: #f0f0f0;
padding: 1em;
}
.aa{
grid-area:zz;
background-color:red;
padding:1em;
}
.ab{
background-color:green;
padding:1em;
grid-area:yy;
}
.ac{
background-color:yellow;
padding:1em;
grid-area:xx;
}
</style>
</head>
<body>
<div class="container">
<header>Header</header>
<aside>Sidebar</aside>
<main>Content</main>
<footer>Footer</footer>
<div class="aa"></div>
<div class="ab"></div>
<div class="ac"></div>
</div>
</body>
</html>This approach is the most straight forward way to configure grids because it provides a clear visual representation in the code and allows element assignment with a single CSS rule.
Empty Cells
You can designate a grid cell to always remain empty, possibly for the purpose of layout spacing. You can define empty cells within your grid-template-areas by using the dot character (.) as a placeholder name.
Example:
.container {
display: grid;
grid-template-areas:
"header header header"
". content ." /* Empty cell in first and third columns */
"footer footer footer";
}In this case, the first and third columns of the second row will always be empty. Browsers will refuse to place items into dot-named cells when using the grid-area property. Even if the empty cell falls within an area that spans multiple cells in the definition, only a single cell is indirectly occupied by the dot. Multiple dot-named areas can exist, even if they lack connectivity.
Combining area with Clear Sizing
CSS Grid automatically calculates the grid-template-rows and grid-template-columns rules, making each cell the same size. However, combine grid-template-areas with clear grid-template-rows and grid-template-columns definitions to give rows and columns specific sizes. This practice allows defining the layout structure visually with areas while controlling the exact dimensions of tracks.
Example combining areas and clear sizes:
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
grid-template-rows: 100px 1fr 50px; /* Define row heights: 100px, flexible, 50px */
grid-template-columns: 150px 1fr 1fr; /* Define column widths: 150px, flexible, flexible */
}In the above example, the header row will be 100px tall, the content row will take up the remaining vertical space (1fr), and the footer will be 50px tall. The sidebar column will be 150px wide, and the two content columns will split the remaining horizontal space equally (1fr 1fr).
When clearly defining row and column sizes alongside grid-template-areas, occasionally simplify the area definition itself if areas don’t need to span across automatically calculated same-sized cells. For Example, a layout with a header, sidebar, content, and footer simplified in the area definition if column and row sizes are handled separately.
grid-template Shorthand
Use the grid-template shorthand property, which combines grid-template-rows, grid-template-columns, and grid-template-areas. The syntax allows list the grid areas with their corresponding row sizes, followed by a forward slash (/), and then the column sizes.
Example using grid-template shorthand for the layout:
.container {
display: grid;
grid-template:
"header header" 200px /* Row 1: header area, 200px height */
"sidebar content" 1fr /* Row 2: sidebar/content areas, flexible height */
"footer footer" 100px /* Row 3: footer area, 100px height */
/ 150px 1fr; /* Column widths: sidebar 150px, content flexible */
}The above example defines a grid with three rows (header, sidebar/content, footer) and two columns (sidebar/footer column and content column). The row heights and column widths are specified right within the template definition.
grid-template-areas is a preferred method for defining the structure of CSS Grid due to its visual nature and ease of item placement using the grid-area property. Use it alone for indirectly sized tracks or combine it with clear track sizing for precise control over dimensions. Define empty areas using the dot character (.). The grid-template shorthand provides a concise way to define both the areas and the track sizes. Each named grid area define must form a rectangle; you cannot create L-shaped or U-shaped areas, for example.
CSS3 Topics