如何设置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网格布局中列的最大宽度？

回答

相关问题