Estoy tratando de entender y trabajar a través de la cuadrícula CSSgrid-template-areas opción.

dado este html

<div class="wrapper">
  <div class="d">D</div>
  <div class="b">B</div>
  <div class="c">C</div>
  <div class="a">A</div>
</div>

y este css

.wrapper {
    grid-template-areas: "areaA areaB areaC areaD" 
}

.A { grid-area: areaA; }
.B { grid-area: areaB; }
.C { grid-area: areaC; }
.D { grid-area: areaD; }

Obtengo el resultado (esperado) siguiente

A B C D

ahora si agrego una consulta de medios y quisiera ocultar la columna B, C y D

@media (min-width: 500px) {
    .wrapper {
        grid-template-areas: "areaA";
    }

    .B {
        display: none;
    }

    .C {
        display: none;
    }

    .D {
        display: none;
    }
}

esto también funciona:

A

ahora, luego quité eldisplay:none entradas, con la esperanza de que debido a que no hubo mención de los elementos engrid-template-areas que no mostrarían Estaba equivocado ;)

¿Es posible especificar simplemente usando css-grid que los elementos no especificados están ocultos por defecto? Parece que no puedo encontrar nada que mencione esto