Css 在没有介质查询的情况下更改网格模板区域？
我试图在不使用媒体查询的情况下实现以下布局。我不想使用媒体查询的原因是，这些内容被嵌入到一个站点中，左侧有一个可以扩展和折叠的侧边栏。当它被扩展时，它会占用大约400px的空间，而当它崩溃时，它可能会占用50个空间。它根据用户交互而不是屏幕宽度进行扩展和折叠，所以我无法通过CSS检测它是否打开。因此，如果使用基于屏幕宽度的媒体查询，而不是基于内容的实际宽度，则布局中可能会出现一些错误。我是否可以使用类似于Css 在没有介质查询的情况下更改网格模板区域？,css,css-grid,Css,Css Grid,我试图在不使用媒体查询的情况下实现以下布局。我不想使用媒体查询的原因是，这些内容被嵌入到一个站点中，左侧有一个可以扩展和折叠的侧边栏。当它被扩展时，它会占用大约400px的空间，而当它崩溃时，它可能会占用50个空间。它根据用户交互而不是屏幕宽度进行扩展和折叠，所以我无法通过CSS检测它是否打开。因此，如果使用基于屏幕宽度的媒体查询，而不是基于内容的实际宽度，则布局中可能会出现一些错误。我是否可以使用类似于flex basis或minmax的方法来实现此布局，而无需媒体查询 /*功能代码*/ .
flex basisminmax/*功能代码*/
.a1{
网格面积：a1；
}
.a2{
网格面积：a2；
}
.b1{
网格面积：b1；
}
.电网{
显示：网格；
网格模板行：400px 200px 200px；
网格模板列：1fr 300px；
网格模板区域：
“a1 b1”
“a2 b1”
“a2。”；
}
/*我可以在容器宽度而不是屏幕宽度上模拟这个吗*/
@介质（最大宽度：1000px）{
.电网{
网格模板列：1fr；
网格模板区域：“a1”
“b1”
“a2”；
网格模板行：400px 600px 200px；
}
.b1{
宽度：300px；
自我辩护：中心；
}
}
/*其他样式*/
.电网{
间隙：8px；
}
.grid*{
边界半径：5px；
背景颜色：浅灰色；
显示：网格；
放置项目：中心；
文本对齐：居中；
}
.折叠{显示：无；}
@介质（最大宽度：1000px）{
.未压缩{
显示：无；
}
.崩溃{
显示：块；
}
}
未折叠状态（缩小屏幕以查看折叠状态）
折叠状态（使屏幕变大以查看未折叠状态）
A1
左上角正常
倒塌时的顶部
A2
通常是左下角
塌陷时的底部
地下一层
右侧正常
折叠时的中间行