Dynamic height with CSS Grid

Question

I have a column with 3 rows, all of them with a dynamic height. What I want is to have a the first row with the min-height, the second taking up the free space and the third, with the min-height also.

This, I could achieve, the problem is that I don't want the middle row to push the third row down. So basically, I want the second row to take all the space and have a scroll.

Following my example, the problem occurs when I add a few li elements.

* {
  box-sizing: border-box;
}

body {
  overflow-y: hidden;
  height: 100vh;
}

.grid {
  display: grid;
  grid-template-rows: min-content 1fr min-content;
  height: 100%
}

ul {
  list-style: none;
  overflow-y: auto;
  height: 70%;
}

li {
  margin: 5px;
  background-color: red;
}

.s-1 {
  background-color: green;
  min-height: 100px;
}

.s-3 {
  background-color: blue;
  min-height: 100px;
}

<section class="grid">
  <div class="s-1">Section 1</div>

  <div>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>

    </ul>
  </div>

  <div class="s-3">Section 3</div>
</section>

Just add `overflow: auto` to the middle item. https://jsfiddle.net/q8rdp3Lc/ — Michael Benjamin, Aug 19 '19 at 16:19
Well, I feel dumb after reading this, thank you very much :) — Pedro Figueiredo, Aug 19 '19 at 16:23
I understand what you want now, so I can tell you that grid is not a good option to do this, grid is for tables. I suggest use position fixed for the bottom div and margin. Or get the first div outside the grid, or just use flex-box. — Omer, Aug 19 '19 at 16:36
You can also use flex on a sublevel if the idea is to expand lis too to fill entire empty space (if any) , then shrink to their contents size untill the scroll becomes needed : https://codepen.io/gc-nomade/pen/KKPgNjZ . Is this behavior what you tried to have ? if li do not need to expand, remove the flex:1 value. — G-Cyrillus, Aug 19 '19 at 16:53

score 0 · Answer 1 · answered Aug 19 '19 at 16:04

0

.row1 {
  height: 50px;
  width: 100%;
  background: red;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 2
}
.row2 {
  height: 100vh;
  background: green;
  position: relative;
  z-index: 1;
}
.row3 {
  height: 50px;
  background: orange;
  position: fixed;
  bottom: 0px;
  left: 0px;
  z-index: 2;
  width: 100%;
}

<div class="row1"></div>
<div class="row2">
fsdfsdfsdfsdf <br/>
fsdfsdfsdfsdf <br/>
fsdfsdfsdfsdf <br/>
fsdfsdfsdfsdf <br/>
fsdfsdfsdfsdf <br/>
fsdfsdfsdfsdf <br/>
fsdfsdfsdfsdf <br/>
fsdfsdfsdfsdf <br/>
fsdfsdfsdfsdf <br/>
fsdfsdfsdfsdf <br/>
fsdfsdfsdfsdf <br/>
fsdfsdfsdfsdf <br/>
fsdfsdfsdfsdf <br/>
</div>
<div class="row3"></div>

Maybe this is what you looking for ?

answered Aug 19 '19 at 16:04

Cuong Hoang

558
1
3
14

I think it's close, but no, not really, this way I have a scroll in the whole page, which I don't want and also, I have to position the second row by hand or else, I won't see the first few elements. – Pedro Figueiredo Aug 19 '19 at 16:10
@PedroFiguueiredo so you want the middle scrollable but hide the scrollbar ? – Cuong Hoang Aug 19 '19 at 16:11
Yeap, I want the the middle one with overflow: auto, but not the whole page. – Pedro Figueiredo Aug 19 '19 at 16:12
oh i see, wait a minute, but do not forget to upvote me, much obliged @PedroFiguueiredo – Cuong Hoang Aug 19 '19 at 16:13
@PedroFiguueiredo https://jsfiddle.net/1jwc0b2q/5/ – Cuong Hoang Aug 19 '19 at 16:16
As I stated before, that's not really what I want, since I don't want to be twicking around with the top position, I want something that works with every case, thanks for the effor anyway. – Pedro Figueiredo Aug 19 '19 at 16:18
@PedroFiguueiredo gimme an upvote – Cuong Hoang Aug 19 '19 at 16:20

score 0 · Answer 2 · answered Aug 19 '19 at 16:25

Using grid - `grid-template-rows: 100px calc(100% - 200px) 100px;`

When I use calc, I set the height I want, 100% of the page less the top and bottom.

In code pen: (https://codepen.io/omergal/pen/dybpOJr) Here we cant see the scroll because it is between the top and bottom

* {
  box-sizing: border-box;
}

body {
  overflow-y: hidden;
  height: 100vh;
  margin: 0;
}

.grid {
  display: grid;
  grid-template-rows: 100px calc(100% - 200px) 100px;
  height: 100%;
}

ul {
  list-style: none;
  overflow-y: auto;
  height: 100%;
  margin:0;
  padding:0;
}

li {
  margin: 5px;
  background-color: red;
}

.s-1 {
  background-color: green;
  height: 100%;
}

.s-3 {
  background-color: blue;
  height: 100%;
}

<section class="grid">
  <div class="s-1">Section 1</div>

  <div>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>

    </ul>
  </div>

  <div class="s-3">Section 3</div>
</section>

The problem with this, is that as I stated in the question, I have a dynamic height in the first and thid row :s — Pedro Figueiredo, Aug 19 '19 at 16:49

Dynamic height with CSS Grid

2 Answers2

Using grid - grid-template-rows: 100px calc(100% - 200px) 100px;

Using grid - `grid-template-rows: 100px calc(100% - 200px) 100px;`