CSS网格布局侧边栏切换

Question

这是关于最近添加到CSS Web标准的新CSS Grid系统的问题.这是我尝试使用的布局示例 - > Codepen示例.

现在我需要切换聊天侧边栏,以便主div占用剩余空间.我已经知道如何在flexbox和javascript中执行此操作.但是,我想使用CSS网格尝试这个.

一种方法是这样做......

grid-template-columns: 1fr 0;

但我希望聊天侧边栏能够顺利切换(如css过渡)而不是突然消失.

任何帮助,将不胜感激.

Answer 1

使网格适应自动,并更改.chat宽度

html,body{
  height: 100vh;
  width: 100wh;
  padding: 0;
  margin: 0;
  color: #e6e6e6;
}

body{
  display: grid;
  grid-template-columns: 9fr auto;
  grid-template-rows: 50px auto 50px;
  grid-template-areas: "header header" 
                      "main chat"
                      "footer footer";
}

.chat{
  grid-area: chat;
  background-color: brown; 
  overflow: auto;
  width: 300px;
  transition: all 1s;
}
.header{
  grid-area: header;
  background-color: black;
}

.main{
  grid-area: main;
  background-color: maroon;
}

.footer{
  grid-area: footer;
  background-color: #222;
}

body:hover .chat {
width: 0px;  
}

  <div class="header">
    header
  </div>
  <div class="main">
    main
  </div>
  <div class="chat">
   chat
  </div>
  <div class="footer">
    footer
  </div>