如何在 CSS Grid 中隐藏内容？ [复制]

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 规则变得更加简单。

更新 Pen 以显示差异。

Answer 2

/* -------------------- 
Styles: Global
-------------------- */
* {box-sizing: border-box;}

body {
  font-family: sans-serif;
  font-size: 20px;
  line-height: 1.62;
}

/* -------------------- 
Grid - Social Icons
-------------------- */
/* define grid for social icons */
div.social {
  display: grid;
  grid-template-columns: repeat(4, 48px);
  grid-auto-rows: 64px;
  align-items: center;
  justify-content: center;
  justify-items: center;
}
/* -------------------- 
Grid - Social Icons
-------------------- */
/* define grid for social icons */
div.social {
  display: grid;
  grid-template-columns: repeat(4, 48px);
  grid-auto-rows: 64px;
  align-items: center;
  justify-content: center;
  justify-items: center;
}

/* align each icon within it's div */
div.social div {
  background: #ffffff;
} 

#site-top-bar{margin: 40px; background: #e1e1e1;}
h1{font-size: 2em;}
h2{font-size: 1.6em;}
h3{font-size: 1.3em;}

ul.nav {margin:0; padding: 0; list-style: none;}
ul.nav li {display: inline;}

/* -------------------- 
grid-template-area ORIGINAL
-------------------- */
/* 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;}


#site-top-bar{
  display: grid;
  grid-template-areas: 'top-social top-search top-nav';
}

/*grid for tablet-portrait*/
@media all and (max-width: 992px) {
  #site-top-bar .search {display:none;}
}

/*grid for phone*/
@media all and (max-width: 767px) {
  #site-top-bar .social { display:none; }
  #site-top-bar .search {display:none;}
}  

<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">Search</button>
  </div>
</div>

这对你有用。