顶部的CSS Grid-optional行

Question

我绊倒了CSS网格。现在我有这样的设置：

.container {
  display: grid;
  grid-template-columns:  repeat(4, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-template-areas:
    "msg    msg    msg    msg"
    "left   left   right  right"
    "left   left   right  right"
    "footer footer footer footer";
}

这很有效。我希望第一行是可选的，因为并不总是显示消息。现在，空间是空白的，这是我所期望的。

这是唯一的方法，将容器添加到容器中，如果有消息而不是将其更改为：

.container {
  /*stuff from above*/

  grid-template-areas:
    "left   left   right  right"
    "left   left   right  right"
    "footer footer footer footer";
}

.container.msg {
  grid-template-areas:
    "msg    msg    msg    msg"
    "left   left   right  right"
    "left   left   right  right"
    "footer footer footer footer";
}

或者我可以告诉网格隐藏空白区域吗？