html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id = "container">
<div id = "header">Header</div>
<div id = "sidebar">Sidebar</div>
<div id = "content">Content</div>
<div id = "footer">Footer</div>
</div>
</body>
</html>
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body {
margin: 0;
padding: 0;
}
#container{
display: grid;
grid-template-columns: repeat(4,auto);
grid-template-rows: 12% repeat(2,auto) 10%;
grid-template-areas:
"header header header header"
"sidebar content content content"
"sidebar content content content"
"footer footer footer footer";
height: 100vh;
width: 100vw;
align-items: stretch;
grid-gap: 5px;
}
#header{
grid-area: header;
background-color: #057;
}
#sidebar{
grid-area: sidebar;
background-color: #649;
js
js
1
BROWSER
Console
Run