Question

我似乎无法弄清楚为什么我的网格无法填满整个屏幕（或至少覆盖整个屏幕）。我似乎无法使网格更多地填满屏幕，以使左侧和右侧的白色空间不会占据较大显示器上的太多屏幕空间。

     @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

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

为什么我的CSS网格无法覆盖整个屏幕？

1 个答案: