CSS Grid

Base Layout for My Website

Feb 21, 2024

CSS Grids make it really easy to setup a simple header/main/footer layout.

Here's the HTML

<html>
  <head></head>
  <body>
    <header>Navbar</header>
    <main>content...</main>
    <footer>&copy; 2024</footer>
  </body>
</html>

Here's the CSS

body {
  height: 100vh;

  /* grid container settings */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    'header'
    'main'
    'footer';
}

body > header {
  grid-area: header;
}

body > main {
  grid-area: main;
}

body > footer {
  grid-area: footer;
}

That complete's the simple layout. Now just add some styling to suit your needs.

Previous: First Blog