如何让 Grid 的一个元素占据所有剩余的 space？

Question

我正在构建一个基于 3 行的网格布局，我希望中间的行尽可能多 space。

第一行应该在屏幕的开头（代码示例中的蓝色条），第三行应该在屏幕的结尾（代码示例中的红色条）

我怎样才能做到这一点？ :S

.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  row-gap: 1%;
}

.top-bar{
  background-color: blue;
  border-radius: 5px;
}

.main-menu{
  justify-self: center;
  display: flex;
  flex-direction: column;
  background-color: green;
}

.bottom-bar{
    background-color: red;
    border-radius: 5px;
}

<div class="grid">
  <div class="top-bar">
    <h1>
     Title
    </h1>
  </div>
  <div class="main-menu">
    <button>
      One Button
    </button>
    <button>
     Other Button
    </button>
  </div>
  <div class="bottom-bar">
   <p>
     I'm a text
   </p>
  </div>
</div>

Answer 1

尝试使用 100vh

.grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    row-gap: 1%;
    height: 100vh;
}

并为 .top-bar abd .bottom-bar 添加特定高度

Answer 2

1st：给网格一个最小高度，比如 100vh (.grid { min-height: 100vh; })。这将至少消耗视口高度。

2nd：将第一行和最后一行的高度设置为min-content。这将使它只消耗所需的高度。默认情况下，auto 将消耗所有剩余的 space。

.grid {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: min-content auto min-content;
  row-gap: 1%;
}

.top-bar{
  background-color: blue;
  border-radius: 5px;
}

.main-menu{
  justify-self: center;
  display: flex;
  flex-direction: column;
  background-color: green;
}

.bottom-bar{
    background-color: red;
    border-radius: 5px;
}

<div class="grid">
  <div class="top-bar">
    <h1>
     Title
    </h1>
  </div>
  <div class="main-menu">
    <button>
      One Button
    </button>
    <button>
     Other Button
    </button>
  </div>
  <div class="bottom-bar">
   <p>
     I'm a text
   </p>
  </div>
</div>

Answer 3

您可以使用 Flexbox 和 100vh 来解决这个问题，如下所示。

.grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.top-bar{
  display: flex;
  height: 20%;
}

.main-menu{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60%;
}

.main-menu button {
  height: 60px;
  width: 120px;
}

.bottom-bar{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20%;
}

如何让 Grid 的一个元素占据所有剩余的 space？

How to make an element of a Grid take all remaining space?

html

css

web-frontend

flexbox

css-grid