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

Question

我有一个 CSS 网格布局 (8 x 4)。预习： 1: https://i.stack.imgur.com/r3XAy.jpg

我有 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 */

这里的身高说明：

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

css grid layout static responsive columns and rows

html

css

css-grid