Search code examples
csscss-grid

CSS Grid - Two column layout with independent scrollable areas

I want to achieve a layout, which has two columns fitting the height of the screen.

  • The left column has two rows, each of the row takes 50% of the visible available height (no fixed height, it should be responsive). If the content of each row would be greater than 50%, it should be scrollable.
  • The right column takes the full height. If its content spans over the visible screen a scrollbar should be displayed.

The current behaviour of my prototype is the following. The right side is working. However I need some help for the left side, because the first row takes more space than the second row: enter image description here

The desired layout should look like the following: enter image description here

Solution

  • If you want to set the container to be the height of the screen you can set .left and .right to height: 100vh;

    stackblitz example

    EDIT

    You could do use a flexbox to contain the left side, and make that center and contain the elements. I have reduced the min-height to 100px to make the demo work in the preview better, but it is easily changeable to another size.

    .ctnr {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  height: 100vh;
  grid-template-areas: "header header" 
                         "nav main" 
                       "footer footer";
}

h3 {
  margin-bottom: 0;
}

header {
  grid-area: header;
  background: turquoise;
}

nav {
  grid-area: nav;
  background: grey;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 100px;
}

.scroll-left {
  overflow: scroll;
  flex: 1;
}

main {
  grid-area: main;
  background: orange;
  overflow: scroll;
  min-height: 100px;
}

body {
  margin: 0;
}
    <div class="ctnr">
  <header>
    <h3>header</h3>
    <div>some content</div>
  </header>
  <nav>
    <div class="scroll-left">
      nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>
    </div>
    <div class="scroll-left">
      nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>
    </div>
  </nav>
  <main>main main main main
    <br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>    main main mainmain
    <br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>    main main main
  </main>
</div>