1

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!

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
tinkerbits
  • 67
  • 7
  • 2
    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 – Asmoth Nov 03 '22 at 14:35
  • 1
    Hi @Asmoth oh I see - I only just started with CSS Grid and thought Chrome would support it well (including its newer subgrid feature). Thank you for pointing that out! If you add your comment as answer, I'll mark it as the accepted answer. – tinkerbits Nov 03 '22 at 14:55

1 Answers1

1

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

Asmoth
  • 552
  • 1
  • 13