CSS Grid一个列占用尽可能多的空间而另一个是可变的

Question

使用CSS Grid，这就是我想要实现的目标：

我试过了：

nav {
  display: grid;
  grid-template-columns: auto 10%;
}

但10%可能仍然较小，具体取决于该列上的内容。如何在宽度可变的字段中尽可能地使它变小？

Answer 1

您可以使用max-content或min-content与Grid合作完成此操作。

nav {
  display: grid;
  grid-template-columns: auto max-content;
}

  

MAX-含量

     

是表示最大最大内容的关键字   占用网格轨道的网格项的贡献。

     

最小含量

     

是表示最大内容贡献的关键字   网格项占据网格轨道。

请参阅grid-template-columns。