如何在CSS网格中为“ 1fr”指定宽度和高度？

Question

我有一个非常复杂的布局，我正在尝试使用CSS网格实现，这是我的列和行布局的代码：

grid-template-columns: 8fr 1fr 3fr 8fr 1fr 5fr 2fr 6fr;
grid-template-rows: 1fr 7fr 1fr 1fr 7fr 1fr 1fr 2fr 1fr 4fr 1fr 3fr;

这里的每1fr应该是20px，其余的要相应缩放，例如8fr将为160px，3fr将为60px，等等。

我如何在保持此精确布局的同时定义每列的宽度和每行的高度？

Answer 1

1fr是相对单位。这意味着只需使用其中的一小部分就可以使用它。

如果要固定宽度，则必须定义它们：

grid-template-columns: 100px 20px 40px 100px ....
grid-template-rows: 100px 20px 40px ....

Answer 2

grid-template-columns: repeat(3, 1fr)

3是您想要的列数，1fr是每列的间距您当然可以更改这些数字，这将更改布局，并且对grid-template-rows:repeat (2, 1fr)等适用相同的条件。