如何使一个网格列按比例大于另一网格列？

Question

我需要按比例调整两列的大小，以便第二列比第一列大 4 倍。

我该怎么做呢？

main{
    display: grid;
    grid-template-columns: ???
    grid-gap: 10px;
    grid-auto-rows: minmax(50pc, auto);
}

Answer 1

您需要使用该fr单位，如下所示：

main{
    display: grid;
    grid-template-columns: 1fr 4fr
    grid-gap: 10px;
    grid-auto-rows: minmax(50pc, auto);
}

这将使两列占用所有可用空间，第二列占用的空间是第一列的四倍。