如何隐藏未在网格模板区域中指定的元素？ [英] How to hide elements not specified in 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; }

我得到（预期）以下结果

I get the (expected) following result

A B C D

现在是否添加媒体查询，并希望隐藏列B，C和D

now if I add a media query, and wanted to hide column B, C and 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 中不会显示的元素。我错了;）

now, I then removed the display:none entries, hoping that because there was no mention of the elements in grid-template-areas that they would not show. I was wrong ;)

是否可以仅使用css-grid指定未指定的元素默认为隐藏的内容？我似乎找不到任何提及此内容的

Is it possible to specify just using css-grid that elements not specified are hidden by default ? I can't seem to find anything that mentions this

推荐答案

grid-template-areas 属性无法隐藏网格项目。

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演示

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>

这篇关于如何隐藏未在网格模板区域中指定的元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！