How To Get CSS-Grid Columns To Follow Resizer

Question

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>

Temani Afif · Accepted Answer · 2022-10-04 13:30:18Z

2

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>

answered Oct 4, 2022 at 13:30

Temani Afif

280k30 gold badges380 silver badges505 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

D7460N Over a year ago

Ah. OK. Column widths need to be controlled in the grid-template-columns of the parent, not the individual columns themselves.

Collectives™ on Stack Overflow

How To Get CSS-Grid Columns To Follow Resizer

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related