CSS grid table row height issue

Question

I have a CSS grid layout in which I want some (middle 3) lines to stretch to their maximum size. I'm probably looking for a property similar to what flex-grow: 1 does with Flexbox, but I cannot find a solution.

Note. This is for the Electron application only, so browser compatibility is not really a concern.

I have the following CSS grid layout:

 .grid { display: grid; grid-template-columns: 1fr 1.5fr 1fr; grid-gap: 10px; height: calc(100vh - 10px); } .grid .box { background-color: grey; } .grid .box:first-child, .grid .box:last-child { grid-column-start: 1; grid-column-end: -1; } /* These rows should 'grow' to the max height available. */ .grid .box:nth-child(n+5):nth-child(-n+7) { grid-column-start: 1; grid-column-end: -1; } 

 <div class="grid"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> 

Which creates the following grid:

If none of the boxes contain content, I would like the grid to look something like this:

Answer 1

One of the Related posts gave me a (simple) answer.

Apparently, the auto value in the grid-template-rows property does exactly what I was looking for.

 .grid { display:grid; grid-template-columns: 1fr 1.5fr 1fr; grid-template-rows: auto auto 1fr 1fr 1fr auto auto; grid-gap:10px; height: calc(100vh - 10px); } 

Answer 2

You would think that below will work, but it is not. I posted it just in case someone wants to comment on why ...

 body{ height:100%; margin: 0; } main{ display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 20vh 60vh 20vh; grid-gap: 4px 4px; } div{ height:100%; width:100%; background: grey; } 

 <main> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <main>