Making sticky column with grid area.

I was working on a project and I implemented the grid properties of CSS. I divided the screen into two grids; the left grid for navigation (for sections within the same page) and the right grid was for the content.

P:S: This is not a tutorial for using grid areas. Learn more about grid areas here

This was my CSS code:

.main {
  display:grid;
  grid-template-areas: "nav content";
  grid-template-columns: 2fr 10fr;
  grid-gap:30px;
}

I wanted the web page to be such that the navigation section doesn't scroll while the contents section remains scrollable. I applied a value of fixed to the position property of the navigation portion.

.nav {
  position: fixed;
}

As expected, my navigation section became fixed to the screen, but I discovered that the navigation section generated properties for itself. This is the feature of fixed and absolute values for the property position. Unlike the relative value which inherits some properties from the parent element, these values develop their own properties.

In order to fix this, I applied the sticky value. This value inherits properties from the parent element while still possessing its own small properties;

.nav {
  grid-area: nav;
  border-right:5px solid #ddd;
  grid-template-rows: repeat(12, 1fr);
  /* Position of the navigation section */
  position:sticky;
 /* Ensuring its attached to the top of the page */
  top:0;
 /* Ensuring the height of to equal to the viewport's height */
  height:100vh;
}

P.S: To make the page responsive for smaller screens, further adjustments become necessary using media queries

There are many other uses of sticky value, but with this understanding, I believe you can maneuver your way when designing.

I hope this article helps someone. Feel free to share.

Thanks for reading.