html - css grid - 在媒体查询中隐藏行

问题描述

我正在使用 css 网格来制作我的布局。我想隐藏我的详细信息行，只在媒体查询中显示侧边栏行（最大 576 像素）。当我想查看详细信息行时，我应该单击“显示详细信息”按钮并隐藏侧边栏行。我尝试了不同的方法，但我无法解决。

我真的很感激任何帮助。

       * {
         margin: 0;
         padding: 0;
       }


       .container {
         margin: 0;
         height: 100%;
         display: grid;
         grid-template-columns: 100%;
         grid-template-rows: 40px 1fr;
         grid-column-gap: 0;
       }

       .header {
         background-color: #ececec;
       }

       .main {
         background-color: yellow;
         display: grid;
         grid-template-columns: 40px 1fr;
       }

       .apps {
         background-color: lightgrey;
       }

       .content {
         background-color: blue;
         display: grid;
         grid-template-columns: 100%;
         grid-template-rows: auto 1fr;
       }

       .content-header {
         background-color: red;
         /* display: flex; */
       }

       .content-body {
         background-color: antiquewhite;
         display: grid;
         grid-template-columns: 250px 1fr;
         grid-template-rows: 1fr;
       }

       .sidebar-panel {
         background-color: aquamarine;
       }

       .sidebar-button,
       .detail-panel-button {
         display: none;
       }

       .details-panel {
         background-color: cyan;
       }

       @media screen and (max-width:576px) {
         .main {
           grid-template-columns: 100%;
           grid-template-rows: 1fr 40px;
         }

         .content {
           order: 1;
         }

         .apps {
           order: 2
         }

         .content-body {
           grid-template-columns: 1fr;
           grid-template-rows: 1fr;

         }

         .sidebar-panel {
           display: block;
         }

         .details-panel {
           display: none;
         }

         .sidebar-button,
         .detail-panel-button {
           display: block;
         }
       }

       button {
         background: #0084ff;
         border: none;
         border-radius: 5px;
         padding: 8px 14px;
         font-size: 15px;
         color: #fff;
       }

       #banner-message.alt {
         background: #0084ff;
         color: #fff;
         margin-top: 40px;
         width: 200px;
       }

       #banner-message.alt button {
         background: #fff;
         color: #000;
       }

    <div class="container">
      <div class="header">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet, expedita.
      </div>
      <div class="main">
        <div class="apps">
          App1 <br>
          App2
        </div>
        <div class="content">
          <div class="content-header">
            <div style="height: 40px;">
              Ribbon
            </div>
          </div>
          <div class="content-body">
            <div class="sidebar-panel">
              <h3>Sidebar</h3>
              <button class="sidebar-button">Show Detail</button>
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laboriosam reprehenderit suscipit
              molestias minus velit earum sed quasi tenetur sit voluptate.
            </div>
            <div class="detail-panel">
              <h3>Detail</h3>
              <button class="detail-panel-button">Show Sidebar</button>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis ex nam, laudantium cumque
              voluptas aliquid harum esse veniam deserunt numquam. Odit tenetur sunt, harum laborum
              voluptatibus pariatur. Ad, nemo ipsa iure recusandae dignissimos iusto odio libero sapiente
              neque! Tenetur et quam magnam, numquam assumenda a aut! Dignissimos, sit. Impedit modi
              necessitatibus alias voluptatum odio ipsum enim quam eum, harum animi quidem, itaque
            </div>

          </div>
        </div>
      </div>
    </div>

标签： htmlcss

html - css grid - 在媒体查询中隐藏行

问题描述

解决方案

推荐阅读