How To Get CSS-Grid Columns To Follow Resizer-CodePudding

I am leveraging grid-auto-flow: column; on the parent wrapper for a dynamic number of columns in a Holy Grail layout, per this excellent tutorial.

And taking it one step further by adding resize: horizontal; to the middle (MAIN) column.

When resizing the middle (MAIN) column, the right (META) column does not want to follow, even though I have not set a max-width on either column.

Tried explicitly setting width and max-width to 100%, 1fr, auto, etc. but nothing seems to work.

How to get the right side (META) column to follow when resizing the middle (MAIN) column? Also keep it from blowing out the right side of the browser?

CodePen:

https://codepen.io/dragontheory/pen/VwxdaVJ?editors=1100

Suggestions? Ideas? What say you?

Thank you!

/* RESET */
*:before,
*:after,
*,
 ::after,
 ::before {
  box-sizing: border-box;
}

/* GLOBAL */
body {
  background-color: rgb(19, 20, 23);
  font-family: sans-serif;
  font-size: .7rem;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: -1px 1px 0 rgba(0, 0, 0, 1.0);
  padding: 0;
  margin: 0;
}

/* LAYOUT */
app-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  gap: .5rem;
  padding: .5rem;
  height: 100vh;
  overflow: hidden;
}

/* All PANELS */
app-panel {
  background-color: rgba(255, 255, 255, 0.04);
  overflow: hidden;
  padding: .5rem;
  border-radius: .3rem;
}

/* HEADER/FOOTER PANELS */
app-panel:first-of-type,
app-panel:last-of-type {
  grid-column: 3 / -3;
}

/* FILTER */
app-panel:nth-of-type(2) {
  grid-column-end: -2;
  min-width: 15rem;
  max-width: 15rem;
}

/* MAIN */
app-panel:nth-of-type(3) {
  grid-column-end: -1;
  min-width: 1rem;
  resize: horizontal;
}

/* META */
app-panel:nth-of-type(4) {
  grid-column-end: 3;
  min-width: 15rem;
}

<app-container>
    <app-panel>HEADER</app-panel>
    <app-panel>FILTER</app-panel>
    <app-panel>MAIN</app-panel>
    <app-panel>META</app-panel>
    <app-panel>FOOTER</app-panel>
</app-container>

CodePudding user response：

You need an explicit definition of the columns in this case. Implicit ones cannot help you.

/* RESET */
*:before,
*:after,
*,
 ::after,
 ::before {
  box-sizing: border-box;
}

/* GLOBAL */
body {
  background-color: rgb(19, 20, 23);
  font-family: sans-serif;
  font-size: .7rem;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: -1px 1px 0 rgba(0, 0, 0, 1.0);
  margin: 0;
}

/* LAYOUT */
app-container {
  display: grid;
  /* 1st column fixed - 2nd column auto - 3rd column fill remaining space */
  grid-template-columns: 15rem auto 1fr;
  grid-template-rows: auto 1fr auto;
  gap: .5rem;
  padding: .5rem;
  height: 100vh;
  overflow: hidden;
}

/* All PANELS */
app-panel {
  background-color: rgba(255, 255, 255, 0.04);
  padding: .5rem;
  border-radius: .3rem;
}

/* HEADER/FOOTER PANELS */
app-panel:first-of-type,
app-panel:last-of-type {
  grid-column: 1/-1;
}

/* MAIN */
app-panel:nth-of-type(3) {
  min-width: 1rem;
  max-width: calc(100vw - 25rem); /* set a max value to keep a minimum width for meta */
  resize: horizontal;
  overflow: hidden;
}

<app-container>
    <app-panel>HEADER</app-panel>
    <app-panel>FILTER</app-panel>
    <app-panel>MAIN</app-panel>
    <app-panel>META</app-panel>
    <app-panel>FOOTER</app-panel>
</app-container>