如何保持CSS網格單元的最小和最大尺寸固定

Question

我正在嘗試使用CSS網格來構建絕對固定的布局。 具有GUI元素和文本字段的嵌入式應用程序的layout。 不應更改單元格的大小並重新調整其大小，並且如果文本字段的內容溢出，則會出現滾動條，否則整個GUI都會出錯。 但是，無論我嘗試什么，我的單元都會隨着內容的增長/縮小而改變大小並重新調整。

設定：

*           Desired FIXED layout 
*    +------------------------+----------------------+
*    |                        |       2              |
*    |                        |----------------------|
*    |                        |       3              |
*    |                        |----------------------|
*    |                        |                      |
*    |                        |                      |
*    |                        |                      |
*    |         1              |                      |
*    |                        |       4              |
*    |                        |                      |
*    |                        |                      |
*    |                        |                      |
*    |                        |                      |
*    |                        |                      |
*    |                        |                      |
*    |                        |                      |
*    |------------------------+----------------------|
*    |                        |       6              |
*    |         5              |                      |
*    |                        |----------------------|
*    |                        |       7              |
*    +------------------------+----------------------+

這是我的MWE。 根據先前的SX問題，我在容器中將minwidth和minheight設置為0，但這似乎沒有效果（也在項目中嘗試過，結果相同）。 （瀏覽器為FF 66開發版，如果有關系的話）

 .container { display: grid; grid-template-row: 70px 70px 310px 110px 30px; grid-template-column: 450px 350px; background: #FAEBD7; height: 590px; width: 700px; min-height: 0; min-width: 0; } .item1 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 4; background: #675443; } .item2 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; background: #42676B; } .item3 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; background: #466567; } .item4 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; background: #BABBAB; } .item5 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 4; grid-row-end: 6; background: #FFD700; } .item6 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 4; grid-row-end: 5; background: #FF69B4; } .item7 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 5; grid-row-end: 6; background: #ADFF2F; } 

 <div class="container"> <div class="item1">1 - Dark brown</div> <div class="item2">2 - Bluish gray Gray</div> <div class="item3">3 - Dark grey</div> <div class="item4">4 - Warm grayish</div> <div class="item5">5 - Gold (test)</div> <div class="item6">6 - Hot pink (test)</div> <div class="item7">7 - Green/Yellow (test)</div> </div> 

Answer 1

1）將grid-template-row和grid-template-column更改為grid-template-rows和grid-template-columns column-在您更改這些設置之前，任何大小調整均不起作用。

2）添加overflow : auto ; 每個項目CSS規則。 如果需要滾動條，將為您提供滾動條；如果不需要滾動條，則將其隱藏。