I have a CSS Grid Layout in which I want to make some (middle 3) rows stretch to their maximum size. I'm probably looking for a property similar to what flex-grow: 1 does with Flexbox but I can't seem to find a solution.
Note: This is intended for an Electron app only, so browser compatibility is not really a concern.
I have the following CSS Grid Layout:
_x000D_
_x000D_
_x000D_
_x000D_
.grid {_x000D_
display: grid;_x000D_
grid-template-columns: 1fr 1.5fr 1fr;_x000D_
grid-gap: 10px;_x000D_
height: calc(100vh - 10px);_x000D_
}_x000D_
_x000D_
.grid .box {_x000D_
background-color: grey;_x000D_
}_x000D_
_x000D_
.grid .box:first-child,_x000D_
.grid .box:last-child {_x000D_
grid-column-start: 1;_x000D_
grid-column-end: -1;_x000D_
}_x000D_
_x000D_
/* These rows should 'grow' to the max height available. */_x000D_
.grid .box:nth-child(n+5):nth-child(-n+7) {_x000D_
grid-column-start: 1;_x000D_
grid-column-end: -1;_x000D_
}<div class="grid">_x000D_
<div class="box"></div>_x000D_
<div class="box"></div>_x000D_
<div class="box"></div>_x000D_
<div class="box"></div>_x000D_
<div class="box"></div>_x000D_
<div class="box"></div>_x000D_
<div class="box"></div>_x000D_
<div class="box"></div>_x000D_
<div class="box"></div>_x000D_
<div class="box"></div>_x000D_
<div class="box"></div>_x000D_
</div>Which creates the following grid:
When none of the boxes contain any content I would like the grid to look something like this:
This question is related to
html
css
grid-layout
css-grid
The answer is
One of the Related posts gave me the (simple) answer.
Apparently the auto value on 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);
}
Source: Stackoverflow.com