CSS网格2列

我需要使用css网格创建此网格：

我的代码：

display grid
grid-template-areas:  "d1 d1 d1 d2 d2 d2 d3 d3 d4 d4 d4"\
                      "d1 d1 d1 d5 d5 d5 d5 d6 d6 d6 d6"

那是工作，但我有个问题。当我调整浏览器大小时，列从中随机调整。如何确定25fr 26fr 23fr 26fr的尺寸

---

我正在尝试网格模板列：25fr 26fr 23fr 26fr，但如何设置第二行25fr 35fr 40fr的值？

您需要将布局划分为5列，并进行一些计算：

您需要的网格布局如下：

网格模板区域：“d1 d2 d3 d3 d4”
“d1 d5 d5 d6 d6”；
网格模板柱：25fr 26fr 9fr 14fr 26fr；

.grid{
显示：网格；
网格模板区域：“d1 d2 d3 d3 d4”
“d1 d5 d5 d6 d6”；
网格自动行：80px；
网格模板柱：25fr 26fr 9fr 14fr 26fr；
栅隙：6px；
}
.电网img{
宽度：100%；
身高：100%；
对象匹配：覆盖；
}
.grid img：第n个子项（1）{
网格面积：d1；
}
.grid img：第n个子项（2）{
网格面积：d2；
}
.grid img：第n个子项（3）{
网格面积：d3；
}
.grid img：第n个子项（4）{
网格面积：d4；
}
.grid img：第n个孩子（5）{
网格面积：d5；
}
.grid img：第n个孩子（6）{
网格面积：d6；
}

---

您需要将布局分为5列，并进行一些计算：

您需要的网格布局如下：

网格模板区域：“d1 d2 d3 d3 d4”
“d1 d5 d5 d6 d6”；
网格模板柱：25fr 26fr 9fr 14fr 26fr；

.grid{
显示：网格；
网格模板区域：“d1 d2 d3 d3 d4”
“d1 d5 d5 d6 d6”；
网格自动行：80px；
网格模板柱：25fr 26fr 9fr 14fr 26fr；
栅隙：6px；
}
.电网img{
宽度：100%；
身高：100%；
对象匹配：覆盖；
}
.grid img：第n个子项（1）{
网格面积：d1；
}
.grid img：第n个子项（2）{
网格面积：d2；
}
.grid img：第n个子项（3）{
网格面积：d3；
}
.grid img：第n个子项（4）{
网格面积：d4；
}
.grid img：第n个孩子（5）{
网格面积：d5；
}
.grid img：第n个孩子（6）{
网格面积：d6；
}

在第二行中，您有3项，因此您希望如何成为40fr 60fr？实际上是25fr 35fr 40fravoid，使用23之类的“素数”。。找一个更合适的数字来找到一个共享乘法器你知道怎么做吗？在第二行你有3个项目，所以你想成为40fr 60fr？实际上25fr 35fr 40fravoid使用“素数”如23。。找一个更合适的号码来找到一个共享乘数你知道怎么做吗？非常感谢