Css 适用于父级的柔性箱网格

我正在尝试创建一个包装到容器大小的项目列表。我希望容器的背景颜色与页面背景颜色不同

下面的代码不是我想要的

一张图片将会说明更多。这就是我想要的：

正文{
背景颜色：灰色；
保证金：0；
字体系列：Arial；
}
.text{颜色：白色；}
.包装纸{
显示器：flex；
证明内容：中心；
}
.内容{
填充：10px；
背景颜色：绿色；
}
.物品{
显示器：flex；
柔性流：行换行；
调整内容：灵活启动；
}
.项目{
宽度：100px；
填充：15px；
高度：100px；
背景颜色：浅蓝色；
边框：1px纯黑；
利润率：15px；
}

只是一些应该换行并调整大小的文本。更多的文字废话。
清单1
清单2
清单3
清单4
清单5

如果是网格布局，为什么不直接使用

网格

正文{
背景颜色：灰色；
保证金：0；
字体系列：Arial；
}
.text{颜色：白色；}
.包装纸{
显示器：flex；
证明内容：中心；
}
.内容{
填充：10px；
背景颜色：绿色；
}
.物品{
显示：网格；
网格模板列：重复（3，1fr）；
}
.项目{
填充：15px；
高度：100px；
背景颜色：浅蓝色；
边框：1px纯黑；
利润率：15px；
}

只是一些应该换行并调整大小的文本。更多的文字废话。
清单1
清单2
清单3
清单4
清单5

因为我想将网格扩展到任何适合屏幕的地方。对不起，我的错误是没有具体说明。哦，网格有一个自动调整设置。快乐的日子。我试过了网格，但是被卡住了，因为我没有看到这个。谢谢你回到正确的道路上。