为什么我的 CSS 网格不能填满整个屏幕？

Question

我似乎无法弄清楚为什么我的网格不会填满整个（或至少更多）屏幕。我似乎无法让网格更多地填满屏幕，这样左右两侧的白色 space 就不会在更大的显示器上占据太多屏幕 space。

     @media only screen and (max-width:970px){
       .billedebar{display: none;}
        }
    
        /*Tablets, Ipads osv*/
        @media only screen and (min-width:600px){
        
        #content{
         margin-left: auto;
         margin-right: auto;
         max-width: 970px;
         display: grid;
         grid-template-columns:repeat(auto-fill,1fr);
         grid-auto-rows:minmax(100px,auto);
         grid-gap: 10px;
         grid-template-areas:
          "header header header header"
          "main main main main"
          "main main main main"
          "main main main main"
            "billedebar billedebar billedebar billedebar"
          "boks01 boks01 boks02 boks02"
          "boks03 boks03 boks04 boks04"
          "footer footer footer footer";
          } }
        
          /*DESKTOP/LAPTOP*/
          @media only screen and (min-width:970px){
        
        #content{
           margin-left: auto;
           margin-right: auto;
           display: grid;
           grid-template-columns: repeat(4,1fr);
           grid-auto-rows: minmax(100px,auto);
           grid-gap: 10px;
           grid-template-areas:
            "header header header header"
                "header header header header"
            "billedebar main main main"
            "billedebar main main main"
            "billedebar main main main"
            "boks01 boks02 boks03 boks04"
                "boks01 boks02 boks03 boks04"
            "footer footer footer footer"
                "footer footer footer footer";
        
          }
        
           .billedebar{
            display: block;
           }
        
        
          }
        
        #content div{
           background: #3498db;
             padding: 10px; /*tekst i grid paddes ind fra kant*/
           color: white;  }
        
          .header{
           grid-area: header;
          }
        
          .billedebar{
           grid-area: billedebar;
          }
        
          .main{
           grid-area: main;
          }
        
          .section{
           grid-area: bigad;
          }
        
          .boks01{
           grid-area: boks01;
          }
        
          .boks02{
           grid-area: boks02;
          }
        
        
          .boks03{
           grid-area: boks03;
          }
        
        
          .boks04{
           grid-area: boks04;
          }
        
          .footer{
           grid-area: footer;
          }

        <body>
          <div id="content">
    
        <div class="header"><p>header</p></div>
        <div class="billedebar">billedebar</div>
        <div class="main">main</div>
        <div class="boks01">ad</div>
        <div class="boks02">ad</div>
        <div class="boks03">ad</div>
        <div class="boks04">ad</div>
        <div class="footer">footer</div>
    
       </div>
    
    </body>

Answer 1

您正在 #content 上设置 max-width: 970px;。

为什么我的 CSS 网格不能填满整个屏幕？

Why won't my CSS grid fill the entire screen?

css

size

grid