CSSグリッドレイアウトで列の最大幅を設定する方法は？私が達成したい何

Question

：

サイズは、その内容から、だけで、ウィンドウ幅の20％にまで導かれ、右側の列でページを持っている、CSS Grid Layoutを使用しました。

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にという印象の下にあったと未満 か等しいですmax。

それは私の場合には幅がauto（= 0divが空である）から20%に設定されていることを意味します。しかし、それは20％にとどまります。それはなぜそうですか？

Answer 1

あなたはminmax機能を誤解してきました。最初に最大値を適用しようとしますが、可能でない場合は最小値が適用されます。ですから、あなたは自分のコンテナの幅の20%を計算して、あなたのグリッド項目にmax-widthプロパティを使用してそれを適用し、第2列のためのあなたのgrid-template-columnsプロパティ定義にautoを使用する必要がレイアウト修正する

。デモ：私はこれを達成するために他の多くの方法があります*右欄にページを持っていると思います* `グリッドのテンプレートcolumns`を使用するための具体的な理由が

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>

Answer 2

コンテナ自体に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>