更改网格模板区域而无需媒体查询？

Question

我正在尝试不使用媒体查询来实现以下布局。我宁愿不使用媒体查询的原因是，此内容嵌入在网站上，左侧的侧边栏可以扩展和折叠。展开后，它约占400像素，折叠时约占50像素。它根据用户交互（而不是屏幕宽度）进行扩展和折叠，因此对于我来说，没有什么好方法可以通过CSS来检测它是否处于打开状态。因此，如果我使用基于屏幕宽度而不是内容实际宽度的媒体查询，则布局可能会出现一些错误。我有什么办法可以使用flex-basis或minmax之类的东西来实现这种布局而无需媒体查询？

/* functional code */

.a1 {
  grid-area: a1;
}
.a2 {
  grid-area: a2;
}
.b1 {
  grid-area: b1;
}

.grid {
  display: grid;
  grid-template-rows: 400px 200px 200px;
  grid-template-columns: 1fr 300px;
  
  grid-template-areas: 
    "a1 b1"
    "a2 b1"
    "a2 .";
}

/* Can I emulate this on the container width instead of the screen width? */
@media (max-width:1000px) {
  .grid {
    grid-template-columns: 1fr;
    grid-template-areas: "a1"
      "b1"
      "a2";
    grid-template-rows: 400px 600px 200px;
  }
  .b1 {
    width:300px;
    justify-self:center;
  }
}

/* other styling */
.grid {
  gap:8px;
}

.grid * {
  border-radius: 5px;
  background-color: lightgray;
  display: grid;
  place-items: center;
  text-align: center;
}

.collapsed { display: none; }
@media (max-width:1000px) {
  .uncollapsed {
    display: none;
  }
  .collapsed {
    display: block;
  }
}
   

<div class="uncollapsed">Uncollapsed State (make screen smaller to see collapsed state)</div>
<div class="collapsed">Collapsed State (make screen bigger to see uncollapsed state)</div>
<div class="grid">
<div class="a1">
  A1
  <br>
  Top-left normally
  <br>
  Top when collapsed
</div>
<div class="a2">
  A2
  <br>
  Bottom-left normally
  <br>
  Bottom when collapsed
</div>
<div class="b1">
  B1
  <br>
  Right side normally
  <br>
  Middle row when collapsed
</div>
</div>

仅供参考：我最终只使用了ResizeObserver polyfill和一些JavaScript。绝对不理想，但是似乎没有JS目前无法进行容器查询。