我有下面的网格布局。总的来说，我有更多的div在网格布局，但重要的是这些2 div.

分区3是页面的内容。这工作正常。布局的响应相对较好。我的问题是左侧的侧边栏。我想将侧边栏菜单的宽度设置为分区2的100%，并且我还想保持侧边栏和分区2的宽度相同。Ofc侧边栏在分区2**内部

对于将侧边栏导入到索引i，请使用Web组件

指数

<div id="div2">
        <aside>
          <sidebar></sidebar>
        </aside>
      </div>

侧边栏.html

<div class="menu-btn">
      <i class="fas fa-bars vertical"></i>
    </div>
    <div class="side-bar">
      <section>
        <div class="close-btn">
          <i class="fas fa-times vertical"></i>
        </div>
        <div class="logo">
          <a href="https://priklady.doucovanispetrem.cz/">
            <img
              src="#"
              alt="Logo" />
          </a>
        </div>
        <h1>Doučování</h1>
        <div class="menu">
          <div class="item">
            <a class="sub-btn">
              Matice
              <i class="fas fa-angle-right dropdown"></i>
            </a>
            <div class="sub-menu">
              <a
                href="/pages/matice/zakladni-operace.html"
                id="matice/zakladni-operace"
                onClick="reply_click(this.id)"
                class="sub-item">
                Základní operace
              </a>
    ......

边栏：

.side-bar {
  background: #1b1a1b;
  backdrop-filter: blur(15px);
  width: 14.6%;
  min-width: 165px;
  max-width: 250px;
  height: 100vh;
  position: fixed;
  top: 0;
  z-index: 50;
  // left: 0px;
  overflow-y: auto;
  transition: 0.6s ease;
  transition-property: left;
}

网格：

#grid {
  display: grid;
  grid-template-rows: 35.3% 1fr;
  grid-template-columns: 16% 75.5% 8.5%;
  gap: 0;
  width: 100vw;
  height: 100vh;
}

#div1 {
  grid-area: 1 / 2 / 2 / 4;
}
#div2 {
  grid-area: 1 / 1 / 3 / 2;
}

#div3 {
  grid-area: 2 / 2 / 3 / 3;
}

#div4 {
  grid-area: 2 / 3 / 3 / 4;
}

@media screen and (max-width: 1024px) {
  #grid {
    grid-template-columns: 20% 78% 2%;
  }
}

@media screen and (max-width: 850px) {
  #grid {
    grid-template-columns: 8.5% 83% 8.5%;
  }
}