How to set a sticky column with css grids?

Asked Sep 21 '18 at 21:13

Active Sep 22 '18 at 00:28

Viewed 109 times

I'm trying to create a two column layout where the left column is fixed.

In the process this is the first time I'm using css grids

.container{
  position: fixed;
  top: 0;
  display: grid;
  grid-template-columns: 38.196601125% auto; /* 61.803398875%*/
}
.main-content{
  padding: 0 100px;
  overflow-y:scroll; 
}

The HTML is

<div className="container">
  <Sidebar /> // just a div
  <div className='main-content'>
  </div>
</div>

The content bellow the fold is hidden and there's no scroll

edited Sep 22 '18 at 00:28

Michael Benjamin

346,931
104
581
701

asked Sep 21 '18 at 21:13

relidon

2,142
4
21
37

1

Grid is an overkill for this requirement. Just use the conventional block div to fix the `Sidebar` and free flow the `.main-content`. Use grid inside these containers if you must. – Dinesh Pandiyan Sep 23 '18 at 02:44
1

Refer this answer - https://stackoverflow.com/a/44005710/3626796 – Dinesh Pandiyan Sep 23 '18 at 02:46

How to set a sticky column with css grids?

0 Answers0