网格内容与网格布局不匹配

Question

基本上，我使用 flexbox 和网格在 HTML/CSS 中构建网格以获得所需的布局。

我一直在 VSCode 中处理它，并设​​法让它看起来像我想要的那样（见下面的 img）。

当它在 WP 中呈现时，我的问题出现了，由于某种原因，框不会扩展以适应网格布局的大小，从而在内容中产生一些奇怪的间隙。 （见下文）

我使用了网格覆盖，我注意到网格的大小是正确的，只是盒子没有正确展开。

我不太确定问题出在哪里，我已经尝试调整布局、填充等。

HTML

main{
width: 100vw;
display: flex;
justify-content: space-around
}

.grid-section{
    width: 100%;
    max-width: 960px;
    height: 100vh;
    max-height: 250px;
    background: #313131;
    color: rgb(211, 168, 168);
    font-size: 15px;
    overflow:hidden;
    border-radius: 10px;
    display: flex;
justify-content: space-around
}


#grid{
display: grid;
grid-template-columns: repeat(32, 1fr);
grid-template-rows: 12% 44% 44% 0%
} 

.box {
display: flex;
flex-basis: 100%;
}


/*top*/
.box:nth-child(1){
    background: #9dcbe9;
    grid-column: 1/33;
    grid-row: 1/2;
    padding: 5px;
}
/*left*/
.box:nth-child(2){
    background: #eed875;
    grid-column: 1/6;
    grid-row: 2/4;
}
/*right*/
.box:nth-child(3){
    background: #c97eec;
    grid-column:28/33;
    grid-row: 2/4;
}
/*middle long*/
.box:nth-child(4){
    background: #9de99d;
    grid-column: 6/28;
    grid-row: 2/3;
}


/*mini boxes*/
.box:nth-child(5){
    background: #ffa569;
    grid-column: 6/9;
    grid-row: 3/4;
}
.box:nth-child(6){
    background: #584905;
    grid-column: 9/14;
    grid-row: 3/4;
}
.box:nth-child(7){
    background: #560b79;
    grid-column: 14/17;
    grid-row: 3/4;
}
.box:nth-child(8){
    background: #00ff00;
    grid-column: 17/20;
    grid-row: 3/4;
}
.box:nth-child(9){
    background: #0a9ed8;
    grid-column: 20/23;
    grid-row: 3/4;
}
.box:nth-child(10){
    background: #5802e2;
    grid-column: 23/28;
    grid-row: 3/4;
}

    <!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="stylesheet.css">
</head>

<title> flexBox testing</title>  
  
<body>

    <main>
    <div id="grid" class="grid-section">    
        <div class="box">
            <div class="box-content">n1</div> 
        </div>   
            
        <div class="box">
            <div class="box-content">n2</div> 
        </div> 
 
        <div class="box"> 
            <div class="box-content">n3</div> 
        </div>    
 
        <div class="box">
            <div class="box-content">n4</div> 
        </div>

        <div class="box">
            <div class="box-content">n5</div> 
        </div>
       
        <div class="box">
            <div class="box-content">n6</div>
        </div> 
 
        <div class="box"> 
            <div class="box-content">n7</div> 
        </div>    
 
        <div class="box">
            <div class="box-content">n8</div> 
        </div>
        <div class="box">
            <div class="box-content">n9</div> 
        </div>
        <div class="box">
            <div class="box-content">n10</div> 
        </div>
    </div>
    </main>    

</body>

提前致谢

Answer 1

<!DOCTYPE html>
<html>

<head>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-column-gap: 0.5rem;
      grid-row-gap: 0.5rem;
      padding: 10px;
    }
    
    .grid-item {
      background-color: #999;
      border: 1px solid #fff;
      padding: 20px;
      font-size: 30px;
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
  </div>
</body>

</html>

---