web-dev-qa-db-ja.com

CSSグリッドレイアウトで列の最大幅を設定する方法は？

私が達成したいこと：

CSSグリッドレイアウト を使用すると、コンテンツからサイズが導出され、ウィンドウ幅の最大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>_

よさそうですが、2番目の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（= divが空の場合は_0_）から_20%_に設定されます。ただし、20％のままです。なぜそうですか？

htmlcsscss3units-of-measurementcss-grid
23
WoJ

minmax関数を誤解しました。最初に最大値を適用し、それが不可能な場合は最小値を適用しようとします。

したがって、レイアウトを修正するには、コンテナ幅の20%を計算し、max-widthプロパティを使用してグリッド項目に適用し、grid-template-columnsプロパティでautoを使用するだけです。 2番目の列の定義。デモ：

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>
14
Vadim Ovchinnikov

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

「fit-content関数は、最大値の1つのパラメーターを受け入れます。このプロパティが設定されたグリッド列/行は、そのコンテンツに応じて、必要に応じてスペースを占有しますが、最大値以下です。」

この記事を参照してください： CSSグリッドニンジャになる！

割合ベースの最大値を引き続き使用しながら、ケースを解決できます。

div {
  outline: 1px dotted gray;
}

.container {
  width: 300px;
  height: 300px;
  display: grid;
  grid-template-columns: 1fr fit-content(20%);
}

.container div {
  overflow: hidden; /* this needs to be set so that width respects fit-content */
}
<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>
3
WDyar