How to make a fixed column in CSS using CSS Grid Layout?

Question

I\'ve made a simple site with a #container div that is parent to two divs: #left and #right, by using Grid Layout:

Is there an

Answer 1

I had a bit of the same problem. I needed a fixed sidenav (col 1) with scrollable content (col 2). Here's how I solved the problem (note that I use styled-component, but you can surely do it with regular css, sass, less, or whatever):

Now the css property for each of those styled-components:

const Grid = styled.div`
  position: relative;
  display: grid;
  height: 100%;
  grid-template-columns: auto 1fr;
  grid-template-areas: 'sidenav content';
`

const Sidenav = styled.div`
  position: relative;
  grid-area: sidenav;
`
const Content = styled.div`
  position: relative;
  grid-area: content;
  width: 100%;
`

const Sider = styled.aside`
  position: fixed;
  height: 100vh;
`

It looks like this, but a bit more complex on my side since I also have a header and footer in my grid, and the sidenav is collapsable. But I think this could work for you.