It's not quite the same, but CSS grid does make creating those kind of high level layouts much, much easier with `grid-template-areas`:

    .header {
        grid-area: hd;
    }
    .footer {
        grid-area: ft;
    }
    .content {
        grid-area: main;
    }
    .sidebar {
        grid-area: sd;
    }

    .wrapper {
        display: grid;
        grid-template-columns: repeat(9, 1fr);
        grid-auto-rows: minmax(100px, auto);
        grid-template-areas:
          "hd hd hd hd   hd   hd   hd   hd   hd"
          "sd sd sd main main main main main main"
          ".  .  .  ft   ft   ft   ft   ft   ft";
    }

Way more declarative, in my opinion.

For fitting it all in one page, you can make the containing grid 100vh and ensure content takes all the extra free space, see this pen (from Mozilla) for an example: https://codepen.io/miriamsuzanne/pen/JjPeQYP?editors=0100

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_La...