9.1 grid-template-areas Property
CSS Grid Layout gives you serious power to create complex layouts using named areas (grid areas). The grid-template-areas property lets you define grid areas for simplified placement of elements. This property helps developers visually organize the layout and make it easier to maintain.
Main Concepts of grid-template-areas
- Defining Areas:
- The
grid-template-areasproperty lets you assign names to different grid areas - Each area name represents a rectangular group of cells
- The
- Using Named Areas:
- Defined areas can be used to place elements by setting the
grid-areaproperty for each element
- Defined areas can be used to place elements by setting the
grid-template-areas Syntax:
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer"
}
Grid Elements Syntax:
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}
Explanation:
- Each line in the
grid-template-areasvalue represents a row in the grid - Each word in a line is a cell or group of cells
- Dots (.) can be used for empty cells
9.2 Example of Using grid-template-areas
Complete Implementation Example:
CSS
.grid-container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-gap: 10px;
}
.header {
grid-area: header;
background-color: #2ecc71;
padding: 20px;
text-align: center;
}
.sidebar {
grid-area: sidebar;
background-color: #3498db;
padding: 20px;
text-align: center;
}
.main {
grid-area: main;
background-color: #9b59b6;
padding: 20px;
text-align: center;
}
.footer {
grid-area: footer;
background-color: #e74c3c;
padding: 20px;
text-align: center;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Areas Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="main">Main Content</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
Code Explanation:
-
.grid-container: defines the Grid container usingdisplay: gridand sets the grid layout withgrid-template-areas. In this case, the layout consists of three rows: the first row is the header, the second row has the sidebar and the main content, and the third row is the footer -
.header,.sidebar,.main,.footer: define styles for different grid areas and associate these areas with their names ingrid-template-areasusing thegrid-areaproperty
9.3 Managing Empty Areas
The grid-template-areas property allows leaving areas empty by using a dot (.) to indicate empty space.
Complete Implementation Example:
CSS
.grid-container {
display: grid;
grid-template-areas:
"header header header"
". main ."
"footer footer footer";
grid-gap: 10px;
}
.header {
grid-area: header;
background-color: #2ecc71;
padding: 20px;
text-align: center;
}
.main {
grid-area: main;
background-color: #9b59b6;
padding: 20px;
text-align: center;
}
.footer {
grid-area: footer;
background-color: #e74c3c;
padding: 20px;
text-align: center;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Empty Grid Areas</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="header">Header</div>
<div class="main">Main Content</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
Code Explanation:
-
.grid-container: creates a Grid container with three areas: header, main content, and footer. The middle row contains empty areas to the left and right of the main content -
.header,.main,.footer: define styles for the areas and associate them with the area names ingrid-template-areas
GO TO FULL VERSION