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

Question

我正在尝试制作一个网格，它有7列，并以所需的行数进行扩展（由后端提供）。所以我的css是这样的：

null

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

null

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

Answer 1

如果我理解正确的话，您想要的网格如下所示：

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

Answer 2

请执行以下操作：

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