隐藏未在grid-template-area中指定的元素 [英] hide elements not specified in grid-template-areas
问题描述
我正在尝试通过css-grid grid-template-areas
选项来理解和工作.
I'm trying to understand and work my way through the css-grid grid-template-areas
option.
给出此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.
这就是您所需要的:
@media (max-width: 500px) {
section:not(.a) { display: none; }
}
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>
这篇关于隐藏未在grid-template-area中指定的元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!