I’ve laid pages out many dif­fer­ent ways, but my favorite is using CSS grid along with a few oth­er tricks. The exam­ple below is vanil­la HTML/CSS; how­ev­er, the con­cept can be adapt­ed to any SPA framework.

Before going into the full exam­ple, I’ll point out a few inter­est­ing tidbits.

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
}

This ensures the body occu­pies the full screen height, allow­ing us to stick the page foot­er to the bot­tom if the con­tent isn’t tall enough to push it off­screen. The vh unit is ​“view height” and 100vh means ​“100% of the view height.”

.app {
  display: grid;
  grid-template-rows:
    [header-start]
      min-content
    [header-end content-start side-start]
      1fr
    [content-end side-end footer-start]
      min-content
    [footer-end];

  grid-template-columns:
    [header-start content-start footer-start]
      auto
    [content-end side-start]
      300px
    [side-end header-end footer-end];
}

The above sets up the page with a grid, nam­ing each line of the grid (names fall nice­ly between the [ ] brack­ets). In the full exam­ple, you will see how we restruc­ture the grid through media queries. As long as all of our line names are present, the page will reflow seam­less­ly, offer­ing a clean entry point into high-lev­el, respon­sive design.

.header {
  // ...
  grid-row: header-start / header-end;
  grid-column: header-start / header-end;
  // ...
}

The above allows us to define what part of the grid the head­er should occu­py using the named lines from the grid definition.

.header {
  // ...
  position: sticky;
  top: 0;
  // ...
}

The above approach allows the head­er to remain at the top of the page when scrolling. You can choose a dif­fer­ent val­ue for top to get it to stick to a dif­fer­ent point. The ben­e­fit of position: sticky over fixed or absolute is that it allows the head­er to con­tin­ue to be a part of the lay­out of the grid. With some­thing like position: fixed you would need to add some top mar­gin to the con­tent to com­pen­sate for the height of the head­er. Less than ideal.

.content {
  padding: 20px;
  grid-row: content-start / content-end;
  grid-column: content-start / content-end;

  background: green;

  display: grid;
  grid-template-columns: repeat(auto-fill, 500px);
  grid-template-rows: 300px;

  grid-auto-columns: 500px;
  grid-auto-rows: 300px;

  grid-auto-flow: dense;

  grid-row-gap: 20px;
  grid-column-gap: 20px;

  justify-content: center;
}

The above is sim­ply a way to lay out the box­es to give the con­tent the nec­es­sary height.

And, final­ly, the full exam­ple is here.

Phone

Wide Screen

Nar­row Screen