Search code examples
csscss-gridgrid-layout

CSS Grid With Resizer Wonkiness (no js)

Seriously pulling out what hair I have left on this one...

TLDR : :

CSS only resizer works great with multiple Grid columns except when there is little (narrow?) content in the most right column?

Yeah...

read on...


GOAL: To resize the middle "results" column using CSS only.

All three examples are identical EXCEPT for the text in the <p>s in the middle right panels.

EXAMPLE 01:

Paragraphs in both right panels.

Resizer works as expected...

CodePen example 01

CodePen example 01

EXAMPLE 02:

Removed all but one word in the <p> in middle right panel.

Resizer works as expected...

CodePen example 02

CodePen example 02

EXAMPLE 03:

Removed all but one word in the <p>s in BOTH right panels.

RESIZER IS STUPID!

Middle panel suddenly starts resizing on both sides as if center justified!

CodePen example 03

CodePen example 03

WHY!?!?!

WHAT STRANGE OBSCURE CSS PROPERTY AM I MISSING!?!?!?!?

SAVE THE LAST HAIR ON MY HEAD!!! PLEASE!!!

Relevant CSS:

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

body {
  padding: 0;
  margin: 0;
}

/* GRID ONLY FOR LAYOUT */

/* PANEL WRAPPER */
app-container {
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
  padding: 1rem;
  height: 100vh;
  overflow: hidden;
}

/* ALL PANELS */
app-panel {
  display: grid;
  border-radius: .3rem;
  overflow: hidden;
  border: solid 1px rgba(255,255,255,0.1);
  align-content: start;
}

/* HEADER/FOOTER */
app-panel:first-of-type,
app-panel:last-of-type {
  grid-column: 1 / -1;
  grid-auto-flow: column;
  grid-auto-columns: 1fr 1fr 1fr;
  padding: 1rem;
}

app-class {justify-self: center;}
app-user, app-version {justify-self: end;}

/* NAV */
app-panel:nth-of-type(2) {width: max-content;}

app-panel:nth-of-type(3) {
  resize: horizontal; /* the STUPID resizer */
  min-width: 20rem;
  max-width: 60vw; /* keeps resizer from going beyond edge of screen */
}

/* Just to show nothing special about <p>s... */
p, h2 {
  margin: 0;
  padding: 1rem
}

Relevant HTML:

<!-- Minimal structural markup -->

<app-container>
  <!-- header -->
  <app-panel></app-panel>
  <!-- nav -->
  <app-panel>
    <panel-list>
      <list-item></list-item>
      <list-item></list-item>
      <list-item></list-item>
    </panel-list>
  </app-panel>
  <!-- results -->
  <app-panel>
    <panel-list>
      <list-item></list-item>
      <list-item></list-item>
      <list-item></list-item>
    </panel-list>
  </app-panel>
  <!-- details -->
  <app-panel>
    <p></p>
  </app-panel>
  <!-- meta -->
  <app-panel>
    <p></p>
  </app-panel>
  <!-- footer -->
  <app-panel></app-panel>
</app-container>
Solution

  • You need to set your columns size individually.

    line 61 grid-template-columns: max-content min-content auto auto;

    fork of codepen3 : https://codepen.io/gc-nomade/pen/LYdOjvg