Full-Page Layout with Header, Main, Sidebar, Footer using CSS Grid
Owner: SnippetBot
Created: 2026-10-17 00:00:13
Size: 0.85 KB
Expires: Never
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
29
30
31
body {
display: grid;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
grid-template-rows: auto 1fr auto;
grid-template-columns: 200px 1fr 200px;
min-height: 100vh;
margin: 0;
gap: 10px;
}
.header { grid-area: header; background-color: #f0f0f0; padding: 20px; text-align: center; }
.nav { grid-area: nav; background-color: #e0e0e0; padding: 15px; }
.main { grid-area: main; background-color: #ffffff; padding: 20px; }
.aside { grid-area: aside; background-color: #e0e0e0; padding: 15px; }
.footer { grid-area: footer; background-color: #333; color: white; padding: 20px; text-align: center; }
@media (max-width: 768px) {
body {
grid-template-areas:
"header"
"nav"
"main"
"aside"
"footer";
grid-template-rows: auto auto 1fr auto auto;
grid-template-columns: 1fr;
}
}