css网格布局静态响应列和行

Question

我有一个 CSS 网格布局 (8 x 4)。 预习： 我有 8 列和 4 行。列响应式（全宽）1fr 单位。
但我无法获得与行相同的行为（需要 4 行全高）。我怎么才能得到它？我的代码：

HTML：

<div class="grid">
  <div id="item-1" class="item item-1">
    <span>1</span>
  </div>
  <div id="item-2" class="item item-2">
    <span>2</span>
  </div>
  ... <!-- until 29 -->

</div>
// Close grid

CSS：

.grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr) minmax(200px, 1fr);
  overflow: hidden;
  grid-template-rows: repeat(4, 1fr);
  grid-gap: 15px;
}


.item {
  border-radius: 3px;
  text-align: center;
  color: white;
  height: 140px; // <-- need 4 rows, but full height. How to do it?
}

.progress-bar {
  grid-row: 1 / -1;
  grid-column: -2 / -1;
}

Answer 1

.grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr) minmax(200px, 1fr);
  /* overflow: hidden; */
  grid-template-rows: repeat(4, 1fr);
  grid-gap: 15px;
  height: 100vh; /* height must be defined; see link reference below */
}


.item {
  border-radius: 3px;
  text-align: center;
  color: white;
  /* height: 140px; */
}

.progress-bar {
  grid-row: 1 / -1;
  grid-column: -2 / -1;
}

body { margin: 0; } /* remove default margins */

这里解释高度：https://stackoverflow.com/a/46546152/3597276