如何設置CSS網格佈局中列的最大寬度？

使用CSS Grid Layout，有與大小是從它的內容導出的右列的網頁，但最多隻能到窗口寬度的20％。

如何我認爲這是可行的：

div { 
 
    border-style: solid; 
 
} 
 

 
#container { 
 
    width: 300px; 
 
    height: 300px; 
 
    display: grid; 
 
    grid-template-columns: 1fr minmax(auto, 20%); 
 
}

<div id="container"> 
 
    <div> 
 
    some content 
 
    </div> 
 
    <div> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus eu leo ac ultrices. Vivamus ornare, orci sed pretium sollicitudin 
 
    </div> 
 
</div>

它看起來不錯，但後來當我刪除第二div的內容，左欄不垮：

div { 
 
    border-style: solid; 
 
} 
 

 
#container { 
 
    width: 300px; 
 
    height: 300px; 
 
    display: grid; 
 
    grid-template-columns: 1fr minmax(auto, 20%); 
 
}

<div id="container"> 
 
    <div> 
 
    some content 
 
    </div> 
 
    <div></div> 
 
</div>

我的問題：

我的印象是，由於minmax()

（...）限定的尺寸範圍大於或等於min且小於或等於最大。

這將意味着，在我的情況下，寬度從auto設定（= 0當div爲空）來20%。但是它保持在20％。爲什麼這樣？

來源

2017-08-02 WoJ

*我想有一個網頁右欄*還有很多其他的方式來實現這一點，是否有使用'網格模板columns'任何具體原因？ –

@AbhishekPandey：是的，整個應用程序基於CSS網格（我將闡明在這個問題中） – WoJ

[如何在第二列不存在時製作列滿跨寬？]（https://stackoverflow.com/q/43301949/3597276） –

你誤解minmax功能。它首先嚐試應用最大值，當它不可能時，它應用最小值。

因此，要解決你佈置你只需要計算你的容器寬度的20%，然後使用max-width財產爲您的網格項申請，並在第二列的grid-template-columns屬性定義使用auto。演示：

div { 
 
    outline: 1px dotted gray; 
 
} 
 

 
.container { 
 
    width: 300px; 
 
    height: 300px; 
 
    display: grid; 
 
    grid-template-columns: 1fr auto; 
 
} 
 

 
.container > :nth-child(2) { 
 
    max-width: 60px; /* 20% x 300px */ 
 
}

<div class="container"> 
 
    <div> 
 
    some content 
 
    </div> 
 
    <div> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus eu leo ac ultrices. Vivamus ornare, orci sed pretium sollicitudin 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <div> 
 
    some content 
 
    </div> 
 
    <div></div> 
 
</div>

來源

2017-08-02 11:52:41

啊。我讀*將大於或等於min且小於或等於max *的大小範圍定義爲從最小到最大的連續體。你的解釋更精確。謝謝。在這種情況下，'max-width'確實是要走的路（我希望避免在列上進行相同的維度設置操作的兩個條目） – WoJ

您可能需要在容器上設置max-width，並將其列設置爲auto。

div, 
 
aside { 
 
    border-style: solid; 
 
} 
 

 
#container { 
 
    width: 300px; 
 
    height: 300px; 
 
    display: grid; 
 
    grid-template-columns: 1fr auto; 
 
} 
 

 
aside { 
 
    max-width: 60px; /* 60px is 20% of 300px*/ 
 
    /* max-width:20%; 20% of window's */ 
 
    font-size: 0; 
 
    transition: 0.25s; 
 
} 
 

 
#container:hover aside { 
 
    font-size: 1em; 
 
}

<div id="container"> 
 
    <div> 
 
    Hover it to see aside grow till 20% average width 
 
    </div> 
 
    <aside>lets give a try to resize it from content</aside> 
 
</div>

來源

2017-08-02 11:51:50

如何設置CSS網格佈局中列的最大寬度？

回答

相關問題