java网格布局怎么缩小行高,如何在CSS网格布局中指定行高？

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:

.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;

}

Which creates the following grid:

When none of the boxes contain any content I would like the grid to look something like this:

解决方案

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);

}