Is the repeat() function compatible with `grid` and `grid-template`?

Question

When implementing either the css property grid or grid-template in combination with the repeat() function to declare the size of the columns, the property value seems to be incorrect.

.body {
  display: flex;
  height: 200px;
  width: 200px;
  gap: 2rem;
}

.container {
  height: 100px;
  width: 100px;
  border: 2px solid black;
  display: grid;
  grid: "header header" 2fr "aside main" 7fr "footer footer" 1fr / repeat(2, 1fr);
}

.header {
  grid-area: header;
  background-color: red;
}

.main {
  grid-area: main;
  background-color: blue;
}

.aside {
  grid-area: aside;
  background-color: green;
}

.footer {
  grid-area: footer;
  background-color: black;
}

.container2 {
  height: 100px;
  width: 100px;
  border: 2px solid black;
  display: grid;
  grid: "header header" 2fr "aside main" 7fr "footer footer" 1fr / 1fr 1fr;
}

.header2 {
  grid-area: header;
  background-color: red;
}

.main2 {
  grid-area: main;
  background-color: blue;
}

.aside2 {
  grid-area: aside;
  background-color: green;
}

.footer2 {
  grid-area: footer;
  background-color: black;
}

<div class="body">
  <div class="container">
    <div class="header"></div>
    <div class="main"></div>
    <div class="aside"></div>
    <div class="footer"></div>
  </div>

  <div class="container2">
    <div class="header2"></div>
    <div class="main2"></div>
    <div class="aside2"></div>
    <div class="footer2"></div>
  </div>
  </div

As you can see in the previous snippet, I have used both the repeat(2, 1fr) function in one container, as well as used the longhand form of 1fr 1fr. The first one reports the property value as erroneous, whilst the second one works.

This should not be the case as they are two ways of stating the same.