How can I make this CSS Grid-based Holy Grail layout with resizable header, footer, and sidebars?

Question

I'm trying to adapt Flexible Holy Grail layout shown at https://css-tricks.com/snippets/css/css-grid-starter-layouts/ to have resizable header, footer and sidebars. One constraint I have is that that the sidebars must all start off at an absolute width given in pixels. The user can then resize them horizontally using the mouse. Similarly the header/footer must start at an absolute height, and also be resizable vertically.

I've tried to use the solutions given here, but they seem to rely to relative sizing, so I lose the ability to provide an exact starting width.

This CodePen shows what I've managed so far. Do I have to somehow convert the absolute initial sizing into relative sizing, or is there another way?

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: repeat(3, 100px);
  grid-gap: 1em;
}

header, footer {
  overflow: auto;
  resize: vertical
}

aside {
  overflow: auto;
  resize: horizontal;
}

header,aside,article,footer {
  background: #eaeaea;
  padding: 1em;
}

header, footer {
  grid-column: 1 / 4;
}

/* Demo Specific Styles */
body {
  margin: 0 auto;
  max-width: 56em;
  padding: 1em 0;
}

.grid > * {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="grid">
  <header>
    Header
  </header>

  <aside class="sidebar-left">
    Left Sidebar
  </aside>

  <article>
    Article
  </article>

  <aside class="sidebar-right">
    Right Sidebar
  </aside>

  <footer>
    Footer
  </footer>
</div>

I do not believe CSS-Grid can do this natively. I suspect Js would be required to *adjust* the grid column widths. Certainly you can set a minimum size of the columns but they default to the maximum allowed. — Paulie_D, Dec 22 '20 at 14:41

score 2 · Accepted Answer · answered Dec 22 '20 at 15:09

You can use auto in the template and you will be able to provide a fixed width/height to the elements

.grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: repeat(3, auto);
  grid-gap: 1em;
}

header, footer {
  overflow: auto;
  resize: vertical
}

aside {
  overflow: auto;
  resize: horizontal;
  width:100px;
}

header,aside,article,footer {
  background: #eaeaea;
  padding: 1em;
  height:100px;
}

header, footer {
  grid-column: 1 / -1;
}

/* Demo Specific Styles */
body {
  margin: 0 auto;
  max-width: 56em;
  padding: 1em 0;
}

.grid > * {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="grid">
  <header>
    Header
  </header>

  <aside class="sidebar-left">
    Left Sidebar
  </aside>

  <article>
    Article
  </article>

  <aside class="sidebar-right">
    Right Sidebar
  </aside>

  <footer>
    Footer
  </footer>
</div>

Nice answer, but I wonder if OP meant resizable *within* the existing grid area (as you have it implemented) or resizable *outside of* the existing grid area. My first instinct was the latter, but I suppose they could have meant this instead. — TylerH, Dec 22 '20 at 15:24
I did mean resizable within the existing grid area, but wasn't clear about that. Thanks for asking for clarification, and thanks to Temani for the simple solution. — Akash, Dec 22 '20 at 17:53

How can I make this CSS Grid-based Holy Grail layout with resizable header, footer, and sidebars?

1 Answers1