Css grid 如何使网格项目动态适应/共享屏幕大小？

我目前正在创建一个游戏，并希望创建一个分割屏幕 从当前版本（在画布上运行）开始，我无意中发现了 .

如何使网格自动调整其内部元素的大小，使其与当前

视口的大小相等


如果只有一个，那么它应该是页面的大小
如果有两个，那么它应该是宽度的一半，并排排列
第三排从第二排开始，为半高全宽
四个应该是四分之一

然后，这一趋势将持续到其他国家

如果你熟悉分屏游戏，你可能知道我说的布局

下面的代码与4个屏幕完美配合；我不知道如何用1-2-3…-5-6-7等实现这一点


.wrapper{
显示：网格；
网格模板柱：1fr 1fr；
网格模板行：1fr；
左侧填充：0；
右边填充：0；
左边距：自动；
右边距：自动；
}
.包装帆布{
宽度：100%；
}
使用Flexbox，您可以轻松完成此操作：


body{display:flex；flex-wrap:wrap}
.flex{
显示：flex；/*以内联方式显示flex项（子项）*/
flex-wrap:wrap；/*使它们能够进行包裹（默认值：nowrap）*/
/*16:9比率*/
宽度：160px；
高度：90px；
保证金：5px；
}
.flex>div{
弹性增长：1；/*已启用（默认值：0）；可以增长/扩展到父级宽度的50%以上*/
弹性基准：50%；/*初始宽度设置为50%，因为无论有多少项，都不会小于50%*/
边框：1px实心；/*只是为了更好地查看结果*/
框大小：边框框；/*由于边框的原因而推荐；否则您需要使用CSS calc（）函数：“flex basis:calc（50%-2px）；”-2px，因为左右边框各为1px；这同样适用于边距，如果要使用边距，则还需要使用calc（），例如：calc（定义边距的x%-2倍）*/
背景：#eff0f1；
}

1.
1.
2.
1.
2.
3.
1.
2.
3.
4.
1.
2.
3.
4.
5.
1.
2.
3.
4.
5.
6.
值得注意的是，您不必为了使用而牺牲功能。它们可以结合在一起！