使用 CSS 网格实现自定义布局：针对特定元素-PHP中文网问答

我需要使用 CSS 网格重现此设计，并且我尝试定位特定的网格元素以获得结果，但没有成功。

这就是我目前所拥有的，我需要修复一些东西，但我想在之前得到正确的结构。

附上代码片段：

.grid-container {
  display: grid;
  grid-template-columns: repeat(13, minmax(30px, auto));
  gap: 30px;
}

.grid-item {
  background-color: red;
  height: 50px;
  width: 50px;
}

<div class="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                             <div class="grid-item"></div>                                        
</div>

我已经尝试使用 grid-template-rows 来修改布局，但没有成功，有什么建议吗？

.grid-container { display: grid; grid-template-columns: repeat(13, minmax(30px, auto)); grid-template-rows: repeat(5, minmax(30px, auto)); gap: 10px; } .grid-item { background-color: red; height: 50px; width: 50px; } .div1 { grid-area: 1 / 1 / 4 / 2; height: 100%; } .div38 { grid-area: 4 / 1 / 6 / 2; height: 100%; } .div39 { grid-area: 4 / 2 / 5 / 6; width: 100%; } .div40 { grid-area: 4 / 6 / 5 / 10; width: 100%; } .div41 { grid-area: 4 / 10 / 5 / 14; width: 100%; } .div42 { grid-area: 5 / 2 / 6 / 4; width: 100%; } .div43 { grid-area: 5 / 4 / 6 / 6; width: 100%; } .div44 { grid-area: 5 / 6 / 6 / 8; width: 100%; } .div45 { grid-area: 5 / 8 / 6 / 10; width: 100%; } .div46 { grid-area: 5 / 10 / 6 / 12; width: 100%; } .div47 { grid-area: 5 / 12 / 6 / 14; width: 100%; }