Grid layout - fixed row and columns when scrolling

Question

I'm using CSS Grid in my project. I have layout where i have multiple columns with headers. There is also a "sidebar" on the left side.

Here you can see my code and very basic configuration on jsfiddle:

.c {
  height: calc(100vh - 3rem);
}

.container {
  align-self: start;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto 1fr;
  overflow: auto;
  height: 100%;
}

.header {
  display: grid;
  grid-template-columns: 6rem auto 20px;
  grid-template-rows: auto;
}

.mails {
  grid-column-start: 2;
  grid-column-end: -2;
  display: grid;
  grid-template-columns: 350px 350px 350px 350px 350px 350px 350px;
  grid-template-rows: auto;
}

.content {
  overflow: auto;
  display: grid;
  grid-template-columns: 6rem 350px 350px 350px 350px 350px 350px 350px;
  grid-template-rows: auto;
}

.time-slots {
  display: grid;
  grid-template-columns: 3rem 3rem;
  grid-template-rows: auto;
}

.data {
  position: relative;
  display: grid;
  grid-template-columns: 350px 350px 350px 350px 350px 350px 350px;
  grid-template-rows: auto;
}

<div class="c">
  <div class="container">
    <div class="header">
      <div class="mails">
        <div style="border: solid 1px orange">
          <div>h1</div>
        </div>
        <div style="border: solid 1px orange">
          <div>h2</div>
        </div>
        <div style="border: solid 1px orange">
          <div>h3</div>
        </div>
        <div style="border: solid 1px orange">
          <div>h4</div>
        </div>
        <div style="border: solid 1px orange">
          <div>h5</div>
        </div>
        <div style="border: solid 1px orange">
          <div>h6</div>
        </div>
        <div style="border: solid 1px orange">
          <div>h7</div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="time-slots">
        <div style="border: solid 1px green; height: 1500px">
          s1
        </div>
        <div style="border: solid 1px red; height: 1500px">
          s2
        </div>
      </div>
      <div class="data">
        <div style="border: solid 1px blue; height: 1500px">d1</div>
        <div style="border: solid 1px blue; height: 1500px">d2</div>
        <div style="border: solid 1px blue; height: 1500px">d3</div>
        <div style="border: solid 1px blue; height: 1500px">d4</div>
        <div style="border: solid 1px blue; height: 1500px">d5</div>
        <div style="border: solid 1px blue; height: 1500px">d6</div>
        <div style="border: solid 1px blue; height: 1500px">d7</div>
      </div>
    </div>
  </div>
</div>

JSFiddle https://jsfiddle.net/ut5pc9ne/5/

What I need to do is to have static header when scrolling down (which is already done). But I also want to have static first two columns (with s1 and s2 text in example) when scrolling horizontally.

Is there a way to do this? My second question is if it is possible to have vertical scroll alvays visible? Because now i have to scroll horizontal scrollbar to the right and ten I can see vertical scrollbar. Is it possible to have this scrollbar always visible on the right side?

score 1 · Answer 1 · answered Jul 16 '20 at 14:59

For starters, I would get familiar with the automatic minimum size of grid items.

These settings – min-width: auto and min-height: auto – are interfering with your ability to limit the scroll tracks to the specified area.

Add this to your code for experimentation: * { min-width: 0; min-height: 0; }

See here: Prevent content from expanding grid items

I also suggest you review your settings for grid-template-columns and grid-template-rows.

For instance, you have this:

.content {
  overflow: auto;
  display: grid;
  grid-template-columns: 6rem 350px 350px 350px 350px 350px 350px 350px;
  grid-template-rows: auto;
}

But the .content element has only two children:

<div class="content">
  <div class="time-slots"></div>
  <div class="data"><div>
</div>

So grid-template-columns should have only two values. Something like this:

.content {
  overflow: auto;
  display: grid;
  grid-template-columns: 6rem 1fr; /* adjusted */;
  grid-template-rows: auto;
}

Grid properties apply only between parent and child elements. Don't expect inheritance beyond the children.

See here: Grid properties not working on elements inside grid container

Grid layout - fixed row and columns when scrolling

1 Answers1