I've set up a sidebar div and a content div to function as two CSS grid columns. The sidebar itself consists of two additional columns, but here's the basic structure:
<div class='site-wrap'>
<div class='sidebar'>
<div class='navbar'></div>
<div class='menu'>
<ul>
<li>menu item</li>
</ul>
</div>
</div>
<div class='content>
<h1>Hello world</h1></div>
</div>
</div>
The specific CSS details are not crucial, but this is how the sidebar functions:
.site-wrap {
display: grid;
grid-template-columns: 320px 1fr;
}
.sidebar {
display: grid;
grid-template-columns: 64px 1fr;
height: 100vh
}
You can see a working version in this JS Fiddle link: https://jsfiddle.net/z4mLtwoy/
Currently, when I close the menu, I adjust the css using grid-template-columns: 72px 1fr on the site-wrap. It works fine, but I would like to incorporate a transition effect. Since CSS grid doesn't support transitions yet, do you know of a CSS (possibly flexbox) or JS method that could provide a transition?