- The `grid-template-areas` CSS property is used in conjunction with the CSS Grid Layout module to define the placement and organization of grid items within a grid container. It allows you to create named grid areas and specify their arrangement using a grid template.
- The `grid-template-areas` property takes a string value that represents the layout of the grid using named areas. Each line of the string corresponds to a row in the grid, and each character within a line represents a cell in that row. By assigning a name to each cell, you can create a visual representation of the grid structure.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: grid;
height: 100vh;
grid-template-columns: 200px auto;
grid-template-rows: 40px auto 100px;
grid-template-areas:
"navbar navbar"
"sidebar main-content"
"footer footer";
}
.grid-item-navbar {
background-color: rgb(189, 113, 113);
grid-area: navbar;
}
.grid-item-sidebar {
background-color: rgb(60, 221, 221);
grid-area: sidebar;
}
.grid-item-main-content {
background-color: rgb(216, 218, 119);
grid-area: main-content;
}
.grid-item-footer {
background-color: rgb(140, 87, 184);
grid-area: footer;
}
</style>
</head>
<body>
<div class="container">
<div class="grid-item-navbar">navbar</div>
<div class="grid-item-sidebar">sidebar</div>
<div class="grid-item-main-content">main-content</div>
<div class="grid-item-footer">footer</div>
</div>
</body>
</html>
- In the `grid-template-areas` declaration, we define three rows and two cells per row. Each character in the string represents a cell in the corresponding row. By assigning names to the cells, we define the grid structure.
- By assigning different names to grid cells and positioning the elements within those cells, you can control the layout and organization of the grid items.
- Example 02:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: grid;
height: 100vh;
grid-template-columns: 200px auto 200px;
grid-template-rows: 40px auto 100px;
grid-template-areas:
"navbar navbar navbar"
"left-sidebar main-content right-sidebar"
"footer footer footer";
}
.grid-item-navbar {
background-color: rgb(189, 113, 113);
grid-area: navbar;
}
.grid-item-left-sidebar {
background-color: rgb(60, 221, 221);
grid-area: left-sidebar;
}
.grid-item-main-content {
background-color: rgb(216, 218, 119);
grid-area: main-content;
}
.grid-item-right-sidebar {
background-color: rgb(60, 221, 221);
grid-area: right-sidebar;
}
.grid-item-footer {
background-color: rgb(140, 87, 184);
grid-area: footer;
}
</style>
</head>
<body>
<div class="container">
<div class="grid-item-navbar">navbar</div>
<div class="grid-item-left-sidebar">left-sidebar</div>
<div class="grid-item-main-content">main-content</div>
<div class="grid-item-right-sidebar">right-sidebar</div>
<div class="grid-item-footer">footer</div>
</div>
</body>
</html>
- This example demonstrates a basic usage of `grid-template-areas` to create a simple grid layout. You can further customize the layout by adjusting the number of rows and columns, adding more named grid areas, or modifying the size and position of the grid items within those areas.
No comments:
Post a Comment