css - 如何隐藏CSS网格中的内容？

Question

我正在开发一个网站顶部栏，需要放置 3 个元素:

• 社交图标

• 搜索表单

• 辅助导航

我想显示 3 个媒体查询:

• 小屏幕仅显示导航

• 中等屏幕显示导航+社交

• 大屏幕显示全部 3 项

顶部栏将是网站主网格内的嵌套网格 - 我知道在某些情况下，这很重要。

非常感谢理解为什么这段代码不起作用以及什么可以起作用。非常感谢!

笔:https://codepen.io/ljburton/pen/eKvaax

/* define grid areas */
#site-top-bar .nav {grid-area: top-nav;}
#site-top-bar .social {grid-area: top-social;}
#site-top-bar .search {grid-area: top-search;}

/*grid for phone*/
@media screen and (max-width: 599px) {
  #site-top-bar {
    display: grid;
    grid-template-columns: 1;
    grid-template-areas: "top-nav";   
  } 
}

/*grid for tablet-portrait-up*/
@media screen and (min-width: 600px) {
  #site-top-bar {
    display: grid;
    grid-template-columns: 2;
    grid-template-areas: "top-social top-nav";   
  } 
}  

/*grid for tablet-landscape-up*/
@media screen and (min-width: 900px) {
  #site-top-bar {
    display: grid;
    grid-template-columns: 3;
    grid-template-areas: "top-social top-search top-nav";   
  }  
} 

<div id="site-top-bar">
  <ul class="nav nav-hor">
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Account</a></li>
  </ul>
  <div class="social">
    <div>T</div>
    <div>F</div>
    <div>P</div>
    <div>I</div>
  </div>  
  <div class="search">
    <input type="text" placeholder="Search">
    <button type="submit"><i class="fa fa-search"></i></button>
  </div>
</div> 

Answer 1

在这里找到答案: hide elements not specified in grid-template-areas

在 CSS Grid 中，如果未显式放置内容，则会隐式放置内容。

意味着网格将显示所有元素，您需要一个单独的规则来隐藏不需要的内容。

最终，这使得 @media 规则变得更加简单。

更新笔以显示差异。