具有定义行高的可扩展css网格

Question

我正在尝试使一个网格，有7列和扩展与所需的行数(由后端提供)。所以我的css是这样的：

​

.doctor-shedule__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(auto, 248px));
  grid-auto-rows: 72px repeat(auto-fill,86px);
  gap: 8px;
}

​

我试图实现的是一个网格，它有一个定义的较小的72px的第一行，然后所有其他行应该是86px…但是它就是不起作用，有没有解决这种情况的办法？使用上面的代码片段，我的第三行代码为73.23px

Answer 1

如下所示：

.doctor-shedule__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(auto, 248px));
  grid-template-rows: 72px ; /* first row */
  grid-auto-rows:86px; /* all the other rows */
  gap: 8px;
}

Answer 2

如果我没理解错的话，你想要一个像这样的网格：

      +=====+=====+=====+=====+=====+=====+=====+
72px  |     |     |     |     |     |     |     |
      +=====+=====+=====+=====+=====+=====+=====+
82px  |     |     |     |     |     |     |     |
      +=====+=====+=====+=====+=====+=====+=====+
82px  |     |     |     |     |     |     |     |
      +=====+=====+=====+=====+=====+=====+=====+
82px  |     |     |     |     |     |     |     |

... auto-fill times

所以要这样做：

.doctor-schedule__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(auto, 248px));
  grid-template-rows: 72px repeat(auto-fill, 86px)
/*     ^^^^^^^^ */
  gap: 8px;
}