Html 背景和包装的css网格问题

我有一个网格，我希望它工作起来有点像它，除了当只有1或2个单元格时，我希望它自动调整大小，而不是一组3，最后一个保留其单元格空间。当我将repeat（3100px）值设置为auto-fit时，它将终止列布局。 我还是需要在3点把它包起来

.parent{
背景#f4 ;；
字号：2em；
边框：1px纯黑；
填充：20px0；
文本对齐：居中；
宽度：100%；
}
.parent.wrapper{
显示：内联网格；
网格模板列：重复（3100px）；
盒影：1px 0px 5px 0px rgba（0,0,0,0.75）；
网格自动流：行；
背景色：白色；
}
.细胞{
边框：1px纯色灰色；
背景色：白色；
}
.牢房，里面{
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：100px；
高度：100px；
文本对齐：居中；
}

第1单元
第2单元
第三单元
第4单元

因此，您希望使网格容器的自动大小小于3个项目，并在此之后进行包装-下面是一个使用隐式网格的解决方案

• 使用单列内联网格容器：

• 使用以下方法将隐式网格的大小调整为100px 100px：

  grid-auto-columns: 100px;
  grid-auto-rows: 100px;
  

• 使用

  网格列：2将第二个项目放置到第二行；使用
  网格列：3将第三项添加到第三行
  

现在您将拥有一个3 x 3的网格-请参见下面的演示：

*{
框大小：边框框；
}
.家长{
背景#f4 ;；
字号：2em；
边框：1px纯黑；
填充：20px0；
文本对齐：居中；
宽度：100%；
}
.parent.wrapper{
显示：内联网格；
网格模板列：100px；/*一列布局*/
网格模板行：100px；/*调整行的大小*/
网格自动列：100px；/*调整隐式网格的列大小*/
网格自动行：100px；/*调整隐式网格的行大小*/
盒影：1px0px5px0pxRGBA（0,0,0,0.75）；
网格自动流：行；
背景色：白色；
}
.单元格：第n个孩子（2）{
网格列：2；/*将其放置在第二列中*/
}
.单元格：第n个孩子（3）{
网格列：3；/*将其放置在第三列中*/
}
.细胞{
边框：1px纯色灰色；
背景色：白色；
}
.牢房，里面{
显示器：flex；
证明内容：中心；
对齐项目：居中；
/*宽度：100px*/
/*高度：100px*/
高度：100%；/*已添加*/
文本对齐：居中；
}

第1单元
第1单元
第2单元
第1单元
第2单元
第三单元
第1单元
第2单元
第三单元
第4单元
第1单元
第2单元
第三单元
第4单元
第5单元
第6单元
第7单元
第8单元
第9单元
第10单元

除非你想使用JS，否则我认为媒体查询是最好的选择。理想情况下，可以提供简单的修复，但这只是一个概念。也许我没有正确理解您，但为什么不

网格模板列：重复（自动拟合，最小值（100px，1fr））

并在

包装器上设置
宽度：300px
？然后这些列将扩展以填充容器的300px宽度。它们不会是300px。
grid-auto-columns: 100px;
grid-auto-rows: 100px;