Question

我正在使用CSS网格设置布局，该布局需要具有固定大小的单元格，但总体大小不确定。也就是说，容器 div的大小（h和w）可能会有所不同，但是各个项div的大小必须始终保持容器的固定百分比（h和w都包括在内）。

根据this question和another question it refers to，在容器级别获得所需结果的正确方法是对磁道大小使用minmax（0，value）语法。回答的问题使用了新的分数单位，并给出了例如minmax（0，fr）的示例，但是我认为它也可以与百分比一起工作，我尝试了以下方法：

.container {
    display: grid;
    grid-template-rows:  minmax(0, 3%) minmax(0,3%) minmax(0, 5%) minmax(0, 53%) minmax(0, 8%) minmax(0, 3%) minmax(0, 20%) minmax(0, 5%) ;
    grid-template-columns:  minmax(0, 3%) minmax(0,54%)  minmax(0, 3%) minmax(0, 40%);
}

它不起作用：单元格会调整大小以容纳溢出的内容，而不是在需要时显示滚动条。但是，如果我切换为以像素为单位指示轨迹，即使使用常规语法，则单元格仍将按预期放置：

.container {
    display: grid;
    grid-template-rows:  20px 20px  30px  310px 50px 20px 110px 30px ;
    grid-template-columns:  20px 410px 20px 300px ;
}

但是，当然，总大小是固定的，这是行不通的。 minmax（0，x）语法对分数以外的单位不起作用吗？还是我走错了路？

具有固定大小单元格的CSS网格

0 个答案: