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網格佈局邊欄切換

回答

相關問題