如何在CSS网格布局中指定行高？ [英] How do I specify row heights in CSS Grid layout?

问题描述

我有一个CSS网格布局，我想在其中使 some （中间3个）行伸展到最大尺寸。我可能正在寻找与 flex-grow：1 与Flexbox相似的属性，但是我似乎找不到解决方案。

注意：这适用于

当这些框都不包含任何内容时，我希望网格看起来像这样：

解决方案

相关文章给了我（简单）答案。

显然，自动 grid-template-rows 属性上的c $ c>值正是我所要的。

  .grid {
 display：grid; 
 grid-template-columns：1fr 1.5fr 1fr; 
 grid-template-rows：自动自动1fr 1fr 1fr自动自动; 
 grid-gap：10px; 
高度：calc（100vh-10px）; 
} 
  

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

<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:

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

这篇关于如何在CSS网格布局中指定行高？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！