在CSS网格中使用minmax()函数

Question

我有一个2列x2行的网格。它们都设置为minmax()大小。我可以问为什么show类的元素不接受网格的全部大小，即使我将网格中的所有其他元素(hide类)设置为宽度0和高度0。minmax()不能正常工作吗？

​

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

 :root {
  --seemoresz: 100px;
}

#outer {
  display: grid;
  grid-template-columns: minmax(calc(700px - var(--seemoresz)), 700px) minmax(0px, var(--seemoresz));
  grid-template-rows: minmax(0px, var(--seemoresz)) minmax(calc(700px - var(--seemoresz)), 700px);
  width: 700px;
  height: 700px;
  overflow: hidden;
  background-color: aqua;
}

.hide {
  width: 0;
  height: 0;
}

<div id="outer">
  <div class="hide">
    hide this
  </div>
  <div class="hide">
    hide this
  </div>
  <div class="show">
    show this
  </div>
  <div class="hide">
    hide this
  </div>
</div>

​

Answer 1

minmax()函数运行良好。calc()函数也是如此。

问题是对设定的最小高度和宽度有误解。

即使将网格项设置为零宽度和高度：

.hide {
  width: 0;
  height: 0;
}

...the网格列有自己的宽度和高度：

#outer {
  display: grid;
  grid-template-columns: minmax(calc(700px - var(--seemoresz)), 700px) minmax(0px, var(--seemoresz));
  grid-template-rows: minmax(0px, var(--seemoresz)) minmax(calc(700px - var(--seemoresz)), 700px);
} 

列和行不会收缩到零，这会阻止.show在整个容器中展开。

考虑在auto中使用minmax()而不是minmax()。这将使列/行能够跟踪网格项的大小。

还考虑这些员额中的解决办法：

• How to make a column span full width when a second column is not there? (CSS Grid)
• Is it possible to hide columns with empty content via the grid-template-columns definition?
• minmax() defaulting to max