我似乎无法弄清楚为什么我的网格无法填满整个（或至少更多）屏幕。我似乎无法使网格更加填满屏幕，因此左侧和右侧的空白不会占据较大显示器上的太多屏幕空间。
@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>您正在将max-width: 970px;设置为#content。