具有定义行高的可扩展 CSS 网格答案

【问题标题】：Expandable css grid with defined row heights具有定义行高的可扩展 CSS 网格
【发布时间】：2021-04-02 15:03:50
【问题描述】：

我正在尝试制作一个包含 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;
}

我想要实现的是一个网格，它具有定义的较小的第一行 72 像素，然后所有其他行都应该是 86 像素......但它只是不起作用在这种情况下是否有解决方法？使用上面的 sn-p 使我的第三行 73.23px

【问题讨论】：

标签： css css-grid

【解决方案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;
}

【讨论】：

【解决方案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;
}

【讨论】：

对不起我的 sn-p，最初我使用了“grid-template-rows”但不会发生预期的效果，因为我说结果是第三行是 72 到 86 之间的某个随机数像素
嗯......好吧，我没有尝试我发布的代码，而且我对网格有点陌生，但我很高兴上述答案有效！