GRID - TEMPLATE- AREAS
<!--html code -->
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<div class="items" id="header1">header1</div>
<div class="items" id="sidebar1">sidebar1</div>
<div class="items" id="sidebar2">sidebar2</div>
<div class="items" id="header2">header2</div>
<div class="items" id="content1">content1</div>
<div class="items" id="content2">content2</div>
<div class="items" id="content3">content3</div>
<div class="items" id="content4">content4</div>
</div>
</body>
</html>
<!--css code-->
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.container{
width:100vw;
height:100%;
background-color:grey;
padding:1rem;
display:grid;
gap:10px;
grid-template-areas:
"sidebar1 header1 header1 header2"
"sidebar1 content1 content2 sidebar2"
"sidebar1 content3 content4 sidebar2"
}
.items{
border:1px solid black;
background-color:blue;
color:white;
padding:0.5rem;
}
#sidebar1{
grid-area:sidebar1;
}
#header1{
grid-area:header1;
}
#header2{
grid-area:header2;
}
#sidebar2{
grid-area:sidebar2;
}
#content1{
grid-area:content1
}
#content2{
grid-area:content2;
}
#content3{
grid-area:content3;
}
#content4{
grid-area:content4;
}