Grid-template
The grid-template property in CSS is a shorthand property for defining grid columns, rows, and areas. It allows you to set values for the following longhand properties: grid-template-rows,grid-template-columns, and grid-template-areas.
grid-template-rows:0fr 0fr;- this is used to divide the frames(fr) of row areas.grid-template-columns:0fr 0fr;- this is used to divide the frames(fr) of column areas.grid-template-areas:" " " " " "- this tag is used to create areas by using thier names inside the " ", with the help ofgrid-area:" ";.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding:0px;
margin:0px;
box-sizing:border-box;
}
.li1 { grid-area:Header; }
.li2 {
padding:50px;
grid-area:menu1; }
.li3 {
padding:50px;
grid-area:content; }
.li4 {
padding:50px;
grid-area:menu2; }
.li5 { grid-area:Footer; }
.container{
display:grid;
grid-template-areas:
"Header Header Header"
"menu1 content menu2"
"Footer Footer Footer";
gap:7px;
padding:7px;
background-color:darkred;
}
div{
text-align: center;
padding: 20px 0;
font-size: 30px;
background-color:aliceblue;
}
</style>
</head>
<body>
<div class="container">
<div class="li1">Header</div>
<div class="li2">menu1</div>
<div class="li3">content</div>
<div class="li4">menu2</div>
<div class="li5">Footer</div>
</div>
</body>
</html>
Top comments (0)