аюсь понять и проработать свой путь через CSS-сеткуgrid-template-areas вариант.

учитывая этот 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>

и это 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; }

Я получаю (ожидаемый) следующий результат

A B C D

теперь, если я добавлю медиа-запрос, и хотел бы скрыть столбцы B, C и D

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

    .B {
        display: none;
    }

    .C {
        display: none;
    }

    .D {
        display: none;
    }
}

это также работает:

A

Теперь я удалилdisplay:none записи, надеясь, что, поскольку не было упоминания о, элементы вgrid-template-areas что они не будут показывать. Я ошибался ;)

Можно ли указать, просто используя css-grid, что не указанные элементы скрыты по умолчанию? Я не могу найти ничего, что упоминает это