CSS网格布局边栏切换

这是一个关于最近添加到CSS Web标准中的新的CSS网格系统的问题。这是我尝试使用的布局示例 - >Codepen example。CSS网格布局边栏切换

现在我需要切换聊天侧栏，使主div占据剩余空间。我已经知道如何在Flexbox和JavaScript中做到这一点。但是，我想尝试使用CSS网格。

一种方法是做到这一点...

grid-template-columns: 1fr 0;

但我想聊天栏得以顺利切换（如CSS转换）而不是突然消失。

任何帮助，将不胜感激。

来源

2017-06-01 Ujwal

使电网具有自动适应，并改变.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>

来源

2017-06-01 21:05:10 vals

该死的..我怎么没想到这一点？谢谢！！ – Ujwal

很高兴它帮助你:-) – vals

由于'fr'单元代表可用空间的一部分，'9fr'和'1fr'在这种情况下是相同的。实际上，由于只有一列使用'fr'，* any *'fr'> 0会做同样的事情。 –

CSS网格布局边栏切换

回答

相关问题