我怎樣才能使這個 CSS 基於網格的聖杯布局具有可調整大小的 header、頁腳和側邊欄？

Question

我正在嘗試調整顯示在https://css-tricks.com/snippets/css/css-grid-starter-layouts/的 Flexible Holy Grail 布局，使其具有可調整大小的 header、頁腳和側邊欄。 我的一個限制是側邊欄必須全部以以像素為單位的絕對寬度開始。 然后用戶可以使用鼠標水平調整它們的大小。 同樣，頁眉/頁腳必須以絕對高度開始，並且也可以垂直調整大小。

我嘗試使用此處給出的解決方案，但它們似乎依賴於相對大小，因此我無法提供准確的起始寬度。

這個CodePen展示了我到目前為止所管理的內容。 我是否必須以某種方式將絕對初始大小轉換為相對大小，還是有其他方法？

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: repeat(3, 100px); grid-gap: 1em; } header, footer { overflow: auto; resize: vertical } aside { overflow: auto; resize: horizontal; } header,aside,article,footer { background: #eaeaea; padding: 1em; } header, footer { grid-column: 1 / 4; } /* Demo Specific Styles */ body { margin: 0 auto; max-width: 56em; padding: 1em 0; }.grid > * { display: flex; align-items: center; justify-content: center; }

 <div class="grid"> <header> Header </header> <aside class="sidebar-left"> Left Sidebar </aside> <article> Article </article> <aside class="sidebar-right"> Right Sidebar </aside> <footer> Footer </footer> </div>

Answer 1

您可以在模板中使用auto ，您將能夠為元素提供固定的寬度/高度

 .grid { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: repeat(3, auto); grid-gap: 1em; } header, footer { overflow: auto; resize: vertical } aside { overflow: auto; resize: horizontal; width:100px; } header,aside,article,footer { background: #eaeaea; padding: 1em; height:100px; } header, footer { grid-column: 1 / -1; } /* Demo Specific Styles */ body { margin: 0 auto; max-width: 56em; padding: 1em 0; }.grid > * { display: flex; align-items: center; justify-content: center; }

 <div class="grid"> <header> Header </header> <aside class="sidebar-left"> Left Sidebar </aside> <article> Article </article> <aside class="sidebar-right"> Right Sidebar </aside> <footer> Footer </footer> </div>