HTML Basic 3 Column Layout using Grid

Posted on In

A simple HTML layout with a header, main content area, and footer using CSS Grid for styling.

HTML Structure

1
2
3
4
5
6
7
8
9
10
<div class="container">
  <header class="header">
    <nav>Navigation</nav>
  </header>
  <main class="main">
    <aside class="aside">Aside</aside>
    <article class="content">Content</article>
  </main>
  <footer class="footer">Footer</footer>
</div>

3 Column Layout using Grid

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
32
33
34
* {
  padding: 0;
  margin: 0;
}

.container {
  display: grid;
  grid-template-rows: auto 1fr auto; /* Header, main content, footer */
  grid-template-columns: 1fr; /* Single column layout */
  min-height: 100vh;
}

.header {
  background-color: #81bfda;
  height: 60px;
}

.main {
  display: grid;
  grid-template-columns: 150px 1fr; /* Aside and content */
}

.aside {
  background-color: #f5f0cd;
}

.content {
  background-color: #f7f48b;
}

.footer {
  background-color: #fada7a;
  height: 60px;
}

Responsive Design

To make the layout responsive, you can use media queries to adjust the grid structure for smaller screens. For example, you can stack the aside and content vertically on smaller devices:

1
2
3
4
5
6
@media (max-width: 600px) {
  .main {
    grid-template-columns: 1fr; /* Stack aside and content vertically */
    grid-template-rows: auto 1fr;
  }
}