如何隐藏在网格区域中未指定的元素

Question

我正在尝试理解 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网格指定未指定的元素被默认隐藏？我似乎找不到任何提到此

Answer 1

grid-template-areas 属性无法隐藏网格项目。它旨在创建网格区域。

但是您的媒体查询仍然非常简单。

这就是您所需要的：

@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>