Question

我正在尝试实现按网格区域划分的网格布局

标题区域应占据整个顶部网格容器的“标题标题标头”和
侧边栏导航区域，应在标题下方延伸。
在主目录中应该有图表，而在主目录下，应该有其他内容的页脚，但是当我添加内容时，它就会浮出水面，但是会插入到主目录中。

有什么办法，当我添加内容时将其保留在其网格区域中？即使给了她最大列宽，导航也一直在伸展……为了更好的理解，我附上了imgs。非常感谢

screnshot of YourApp

    //=========================================================================
// Grid container
//=========================================================================
.container {
  width: 100%;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 110px)) 
                         repeat(auto-fill, minmax(500px, 2fr)) 
                         repeat(autofill,  minmax(400px,2fr));

  grid-template-rows: repeat(auto-fill, minmax(100px, 100px)) 
                      repeat(auto-fill, minmax(200px,8fr)) 
                      repeat(auto-fill, minmax(150px,2fr));


  // grid-template-columns: minmax(100px, 120px) minmax(500px, 2fr) minmax(400px,2fr);
  // grid-template-rows: minmax(100px, 110px) minmax(200px,8fr) minmax(150px,2fr);

  // grid-gap: 10px;
  grid-template-areas: 
    "header header header"
    "nav main main"
    "nav footer footer";
}
<body>
  <div class="container grid">
    <!--HEADER-->
    <header>
      <div class="header">
        <h1 class="logo">YourApp™</h1>
        <div class="userProfile">
          <div class="bell">
            <img id="bell" src="icons/icon-bell.svg" alt="notifications" height="30" width="30"/>
          </div>
          <div class="user">
             <img src="images/member-1.jpg" alt="Image of member 1" title="image_user_1">
             <p>Member 1</p>     
          </div>
        </div>
      </div>   
    </header>
    <!--SIDEBAR NAVIGATION-->
    <nav class="navigation">
      <div class="navFlex">
        <ul>
          <li> 
            <a href="#"><img alt="The dashboard icon" class="icon icon-dashboard" src="icons/icon-dashboard.svg"/></a>
          </li>
          <li> 
            <a href="#"><img alt="The members icon" class="icon" src="icons/icon-members.svg"/></a>
          </li>
          <li>
              <a href="#"><img alt="the visits icon" class="icon" src="icons/icon-visits.svg"/></a>
          </li>
          <li>
              <a href="#"><img alt="the settings icon" class="icon" src="icons/icon-settings.svg"/></a> 
          </li>
       </ul>
      </div>
    </nav>
    <!--MAIN-->
    <main>
      <div class="main-flex">
        <div class="barChart">
         <canvas id="barChart" width="400" height="400"></canvas>
        </div>
        <div class="lineChart">
          <canvas id="lineChart" width="400" height="400"></canvas>
        </div>

      </div>


    </main>
    <!--FOOTER-->
    <footer>



    </footer>
  </div>
  <script src="app.js"></script>
</body>

响应式网格布局CSS

0 个答案: