CSS Subgrid "Invalid Property Value"

I have the following django template:

/*The body and the header are being positioned using CSS Grid:*/

body {
  display: grid;
  grid-template-columns: 1fr 4fr 1fr 1fr;
  grid-template-rows: 150px 1fr 50px;
  min-height: 100vh;
  font-size: 18pt;
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 400;
  color: black;
  background-color: #ffe3dd;
  margin: 0;
}

header {
  display: grid;
  grid-template-columns: subgrid;
  grid-column-start: 2;
  grid-column-end: 4;
}

<header>
  <h1 class="home">
    <a href="{% url 'home' %}">Vilanovella</a>
  </h1>
  <span class="menubar">
                <a href="{% url 'archive' %}">Archive</a>
                &nbsp;
                <a href="{% url 'about' %}">About</a>
            </span>

</header>
<div class="post-area">
  {% block content %} {% endblock content %}
</div>
<footer>
  Copyright Jon Burke
</footer>

However Google Chrome gives and "Invalid Property Value" error for "grid-template-columns: subgrid;".

Can anyone help me understand this? I don't see what would be wrong about using 'subgrid' as value but perhaps someone here can help me understand?

Thank you!

Solution

Unfortunately, subgrid is not compatible for Google Chrome. You can watch the browser compatibility on this website : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid