隐藏网格项目答案

【问题标题】：Hiding grid items隐藏网格项目
【发布时间】：2018-02-11 19:09:38
【问题描述】：

我是 CSS 网格的新手。我不想使用任何框架。我有一个模板，在桌面浏览器中有 3 列，但我希望特定行在移动浏览器中只有两列（其中一列不显示）。我的媒体查询中的display: none 是最佳做法还是有更好的方法？

.hg_header {
  grid-area: header;
}

.hg_footer {
  grid-area: footer;
}

.hg_main {
  grid-area: main;
}

.hg_left {
  grid-area: altnav;
}

header {
  background-color: yellow;
}

main {
  background-color: white;
}

aside {
  background-color: gray;
}

footer {
  background-color: black;
}

.hg {
  display: grid;
  grid-template-areas: "header header header" "altnav main main" "footer footer footer";
  grid-template-columns: 150px 1fr 150px;
  grid-template-rows: 100 1fr 50px;
  min-height: 100vh;
}

@media screen and (max-width: 600px) {
  .hg {
    grid-template-areas: "header" "main" "footer";
    grid-template-columns: 100%;
    grid-template-rows: 100px 1fr 50px;
  }
  .hg_left {
    display: none;
  }
}

<header class='hg_header'>HEADER</header>
<main class='hg_main'>MAIN</main>
<aside class='hg_left'>ASIDE</aside>
<footer class='hg_footer'>FOOTER</footer>

【问题讨论】：

标签： html css css-grid

【解决方案1】：

网格布局设计用于调整网格项目的大小和位置。它不是从布局中删除元素的工具。为此，display: none 是一个干净有效的解决方案。

这是您的代码的简化版本：

body {
   display: grid;
   grid-template-areas: "header header header" 
                          "altnav main main" 
                        "footer footer footer";
   grid-template-columns: 150px 1fr 150px;
   grid-template-rows: 100 1fr 50px;
   height: 100vh; 
 }
 
header { grid-area: header; background-color: yellow; }
main   { grid-area: main;   background-color: white;  }
aside  { grid-area: altnav; background-color: gray;   }
footer { grid-area: footer; background-color: black;  }
 
@media screen and (max-width: 600px) {
   body {
     grid-template-areas: "header" "main" "footer";
     grid-template-columns: 100%;
     grid-template-rows: 100px 1fr 50px;
   }
   
   aside { display: none; }
 }

body   { margin: 0; }

<header>HEADER</header>
<main>MAIN</main>
<aside>ASIDE</aside>
<footer>FOOTER</footer>

jsFiddle demo