CSS 网格布局侧边栏切换

Question

这是一个关于最近添加到 CSS 网络标准的新 CSS 网格系统的问题。这是我尝试使用的布局示例：

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

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

.chat{
  grid-area: chat;
  background-color: brown; 
  overflow: auto;
}
.header{
  grid-area: header;
  background-color: black;
}

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

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

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

Codepen example

现在我需要切换聊天侧边栏，让主要的 div 占据剩余的 space。我已经知道如何在 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>

CSS 网格布局侧边栏切换

CSS Grid Layout Sidebar toggle

html

css

css-grid