具有定义行高的可扩展css网格
我正在尝试创建一个网格,它有7列,并扩展为所需的行数(由后端提供)。 所以我的css是这样的:具有定义行高的可扩展css网格,css,css-grid,Css,Css Grid,我正在尝试创建一个网格,它有7列,并扩展为所需的行数(由后端提供)。 所以我的css是这样的: .doctor-schedule\uu网格{ 显示:网格; 网格模板列:重复(7,最小值(自动,248px)); 网格自动行:72px重复(自动填充,86px); 间隙:8px; }请执行以下操作: .doctor-schedule\uu网格{ 显示:网格; 网格模板列:重复(7,最小值(自动,248px)); 网格模板行:72px;/*第一行*/ 网格自动行:86px;/*所有其他行*/ 间隙:8
.doctor-schedule\uu网格{
显示:网格;
网格模板列:重复(7,最小值(自动,248px));
网格自动行:72px重复(自动填充,86px);
间隙:8px;
}
请执行以下操作:
.doctor-schedule\uu网格{
显示:网格;
网格模板列:重复(7,最小值(自动,248px));
网格模板行:72px;/*第一行*/
网格自动行:86px;/*所有其他行*/
间隙:8px;
}
如果我理解正确,您希望网格如下所示:
+=====+=====+=====+=====+=====+=====+=====+
72px | | | | | | | |
+=====+=====+=====+=====+=====+=====+=====+
82px | | | | | | | |
+=====+=====+=====+=====+=====+=====+=====+
82px | | | | | | | |
+=====+=====+=====+=====+=====+=====+=====+
82px | | | | | | | |
... auto-fill times
这样做:
.doctor-schedule\uu网格{
显示:网格;
网格模板列:重复(7,最小值(自动,248px));
网格模板行:72px重复(自动填充,86px)
/* ^^^^^^^^ */
间隙:8px;
}
就这样!!谢天谢地=]很抱歉我的代码片段,最初我使用了“网格模板行”,但没有达到预期效果,因为我说过结果是第三行是72到86 pxhmm之间的随机数。。。嗯,我没有尝试我发布的代码,我对网格有点陌生,但我很高兴上面的答案奏效了!