带有 Resizer Wonkiness 的 CSS 网格（无 js）答案

【问题标题】：CSS Grid With Resizer Wonkiness (no js)带有 Resizer Wonkiness 的 CSS 网格（无 js）
【发布时间】：2022-07-29 08:11:22
【问题描述】：

认真地拔掉我留在这个头发上的头发......

TLDR : :

仅 CSS 调整大小适用于多个 Grid 列，除非最右侧列中的内容很少（窄？）？

是的……

继续阅读...

目标：仅使用 CSS 调整中间“结果”列的大小。

除了中间右侧面板中<p>s 中的文本之外，所有三个示例都是相同的。

示例 01：

两个右侧面板中的段落。

调整大小按预期工作...

CodePen example 01

示例 02：

删除了右中面板<p> 中除一个单词之外的所有单词。

调整大小按预期工作...

CodePen example 02

示例 03：

在两个右侧面板中删除了 <p>s 中除一个单词之外的所有单词。

调整器是愚蠢的！

中间面板突然开始在两边调整大小，好像居中对齐！

CodePen example 03

为什么！？！？！

我错过了什么奇怪的晦涩 CSS 属性！？！？！？！？

保存我头上的最后一根头发！！！ 拜托！！！

相关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
}

相关 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>

【问题讨论】：

标签： css css-grid grid-layout

【解决方案1】：

您需要单独设置列大小。

第 61 行grid-template-columns: max-content min-content auto auto;

codepen3 的分支：https://codepen.io/gc-nomade/pen/LYdOjvg

【讨论】：