清空网格容器中无法解释的不需要的空间

问题描述

我希望内容会填满容器而不留空位， 所以容器应该更小。

这个空的空间是从哪里来的？不是应该默认包装内容吗？

grid-css 分为 3 个区域，在正确的区域，我希望它会环绕内容，我不知道为什么它这么大。

这是 HTML：

 <header class="header">


   <div class="left-pannel">
         <div class="main-menu"></div>
          <div class="logo"></div>
   </div>

   <div class="bread-crumbs">Operations > 360</div>

   <div class="right-pannel">
      <div class="search"></div>
       <div class="notifications"></div>
        <div class="tips"></div>
         <div class="history"></div>
          <div class="user-tips"></div>
   </div>

    and here is the less code:


.header {
    display:grid;
    height: 76px;
    width:100%;
    position: absolute;
    top:0;
    background-color: @blue-brand;
    align-items: center;
    grid-template-areas:"left-pannel bread-crumbs right-pannel";
    grid-gap:20px;
    color:@white;

    .left-pannel {
          grid-area: left-pannel;
          display: grid;
          grid-gap: 20px;
          grid-template-columns: minmax(40px,auto) 1fr;
          align-items: center;

                .main-menu {
                    height: 40px;
                    width: 40px;
                    margin-left: 24px;;
                    grid-column: 1 / 2;
                    background-image:url('../../assets/Images/Hamburger.svg');
                    background-position:50%;
                    background-repeat: no-repeat;
                    }

                .logo {
                  height: 50px;
                  grid-column:2 / 3;
                  background-image: url('../../assets/Images/logo.svg');
                  background-position: 0 50%;
                  background-repeat: no-repeat;
                  }

          }

        .bread-crumbs {
          grid-area: bread-crumbs;
          display: flex;
          align-items: center;
          justify-content: left;
          height: 50px;
          align-content: center;
          }

 .right-pannel {
                display: grid;
                grid-area: right-pannel;
                grid-auto-columns: minmax(252px,252px) 40px 40px 40px 40px;
                grid-gap: 20px;
                align-items: center;
                justify-content: end;
                margin-right: 32px;
                border: 1px solid #f1f1f1;

                 .search{
                  grid-column:1 / 2;
                  background-color: @blue-dark;
                  height:40px;
                                    }
  
                 .notifications{
                   grid-column:2 / 3;
                   height: 40px;
                   width: 40px;
                   background-image: url('../../assets/Images/Notifications.svg');
                                      }
       
                 .tips{
                   grid-column:3 / 4;
                   height: 40px;
                   width: 40px;
                   background-image: url('../../assets/Images/Tips.svg');
                                   }

                 .history{
                   grid-column:4 / 5;
                   height: 40px;
                   width: 40px;
                   background-image: url('../../assets/Images/History.svg');
                                 }

                  .user-tips{
                    grid-column:5 / 6;
                    height: 40px;
                    width: 40px;
                    background-image: url('../../assets/Images/User.svg');
                                    }

            }

解决方法

我怀疑是因为容器的长度大于列的总和。

换句话说：

252 + 40 + 40 + 40 + 40 + gaps < 100%

试试这个：

grid-template-columns: 252px repeat(4,minmax(40px,1fr))

这将使列占据剩余空间。