如何使CSS网格列跟随Resizer

Question

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

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

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

尝试将width和max-width显式设置为100%、1fr、auto等，但似乎什么都不起作用。

调整中间(MAIN(列的大小时，如何使右侧(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>