如何使CSS-Grid列跟随Resizer

Question

根据这个优秀的grid-auto-flow: column;，我在父包装器上利用教程来获得神圣圣杯布局中的动态列数。

并通过将resize: horizontal;添加到中间(MAIN)列中更进一步。

当调整中间(主)列的大小时，右(META)列不想跟随，即使我没有在这两列上设置最大宽度。

尝试显式地将width和max-width设置为100%、1fr、auto等，但似乎没有什么效果。

当调整中间(主)列的大小时，如何使右侧(META)列跟随？也不要让它吹出浏览器的右侧？

CodePen：

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

有什么建议吗？想法？你怎么说？

谢谢!

​

/* 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>

​

Answer 1

在这种情况下，需要对列进行显式定义。含蓄的人帮不了你。

​

/* 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>

​