How to hide elements not specified in grid-template-areas?

Answer 1

The grid-template-areas property cannot hide grid items. It is designed to create grid areas.

But your media query can still be very simple.

This is all you need:

@media (max-width: 500px) {

   section:not(.a) { display: none; }

}

jsFiddle demo

article {
  display: grid;
  grid-template-areas: "areaA areaB areaC areaD";
}

@media (max-width: 500px) {
  section:not(.a) { display: none; }
}

.a { grid-area: areaA; }
.b { grid-area: areaB; }
.c { grid-area: areaC; }
.d { grid-area: areaD; }

/* non-essential demo styles */

section {
  height: 50px;
  width: 75px;
  background-color: lightgreen;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2em;
}

<article>
  <section class="d">D</section>
  <section class="b">B</section>
  <section class="c">C</section>
  <section class="a">A</section>
</article>