Html 在CSS网格中，当列的宽度小于某个特定大小时，如何隐藏该列？

我是CSS网格新手，不确定不使用JavaScript是否可以完成以下任务

当边栏宽度小于

200px

时，我试图隐藏边栏

但我只想在

200px

不超过可用宽度的

40%

时显示一个侧边栏

.grid{
显示：网格；
网格模板列：minmax（00200px）1fr 0；/*这里是什么*/
最小高度：100px；
}
.grid.sidebar{
网格面积：2/1/2/1；
背景：红色；
}
.grid.main{
网格面积：2/2/2/2；
背景：蓝色；
}

---

如果我理解正确，您可以这样做，这就是您所追求的：

body{margin:0}/*推荐*/
.电网{
显示：网格；
网格模板列：最小最大值（自动，40%）1fr；/*第一列不超过40%（从500px以上）*/
最小高度：100px；
}
.grid.sidebar{
/*网格面积：2/1/2/1*/
背景：红色；
}
.grid.main{
/*网格面积：2/2/2/2*/
背景：蓝色；
}
@媒体（最大宽度：499.99px）{/*屏幕宽度（或.grid）需要至少为500px宽，才能显示.sidebar，因为200px的最小宽度正好是500px的40%，所以在500px及以上时显示，但在较少时隐藏*/
.grid{网格模板列：1fr}
.grid.sidebar{display:none}
}

您可以使用媒体查询，但它将基于页面的宽度，而不是网格/div。不幸的是，我需要它来响应容器，因为这个

div

可能在一个大页面中，但在一个小容器中mm。。。那我不知道。但没有实施任何措施。也许会有其他人加入进来。请参阅：@mpen，感谢您提供了指向JS库的链接，以便在整个页面布局上进行元素查询，但不是在较小的容器中