我可以使用隐式网格做什么，而不能使用显式网格做什么？

Question

我们有一个包含grid-auto-rows和grid-auto-columns的隐式网格。但是，我们也可以结合使用grid-template-rows / grid-template-columns和repeat和auto-fit来创建一个显式的隐式网格。

使用grid-auto-*和grid-template-*结合repeat和{{1 }} / auto-fill？

如果是，有没有办法在隐式行之后指定显式行/列 ？

就像我有3个显式行，然后是隐式网格（因为我无法使用显式网格做这件事，因此需要它），然后是一个显式行。

Answer 1

  

我可以使用隐式网格做什么，而不能使用显式网格吗？

是的。隐式网格处理其存在或放置为不可预测的网格项目。这就是隐式网格的主要好处。显式网格仅限于其存在或放置为可预测的网格项目。

  

我们有一个包含grid-auto-rows和grid-auto-columns的隐式网格。但是，我们也可以结合使用grid-template-rows / grid-template-columns和repeat和auto-fit来创建一个显式的隐式网格。

您的第二句话并不完全正确。

关于grid-template-rows / grid-template-columns与repeat和auto-fit或{{1 }}。 auto-fill表示可预测的曲目模式。这使得它完全“显式”（再次，术语为defined in the spec）。

  

使用repeat()和grid-auto-*结合grid-template-*和{{1 }} / repeat？

如果事先知道网格的所有列和行，答案是否定的。

如果事先不知道网格的所有列和行，答案是肯定的。

  

如果是，有没有办法在隐式行之后指定显式行/列 ？

     

就像我有3个显式行，然后是隐式网格（因为由于我无法使用显式网格，所以我需要它），然后是一个显式行。

可能。您将必须显示一个代码示例。

想象一个包含三个显式行的网格-页眉，内容和页脚。

但是内容部分的行数未知。

在这种情况下，您可以执行以下操作：

auto-fill

这是一个完整的例子：

auto-fit

#container {
  display: grid;
  grid-template-rows: 50px auto 50px;
}

#content {
  display: grid;
  grid-auto-rows: 200px;
}